vue大屏开发系列—列表无缝滚动之vue-seamless-scroll(vue大屏组件库)

vue大屏开发系列—列表无缝滚动之vue-seamless-scroll

目录

一 安装

二 使用

 三 简单使用

四  应用

---

推荐整理分享vue大屏开发系列—列表无缝滚动之vue-seamless-scroll(vue大屏组件库)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue开发数据大屏,vue 大屏可视化设计 开源,vue大屏项目,vue大屏适配,vue大屏可视化模板,vue大屏项目,vue大屏项目,vue大屏项目,内容如对您有帮助，希望把文章链接给更多的朋友！

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

官方文档：  vue-seamless-scroll的简介及使用教程 - Made with Vuejs

一 安装

npm安装 ： 

npm install vue-seamless-scroll --save

yarn 安装：

yarn add vue-seamless-scroll 二 使用

全局注册：

import Vue from 'vue'import scroll from 'vue-seamless-scroll'Vue.use(scroll)

局部注册：

 注意这里分vue2和veu3注册

vue2:  

import vueSeamless from 'vue-seamless-scroll'

vue3；找不到路径所以加了 /src

import vueSeamless from 'vue-seamless-scroll/src'components: { vueSeamless }, 三 简单使用<div id="app"> <vue-seamless-scroll></vue-seamless-scroll> </div>

四  应用

本文是在“物美智能”源码的基础上进行二次开发完成wumei-smart: 物美智能开源物联网平台，简单易用，可用于搭建物联网平台以及二次开发和学习。适用于智能家居、智慧办公、智慧社区、农业监测、水利监测、工业控制等。

也可以直接在lofTV-Screen代码上直接修改IofTV-Screen: 🔥一个基于 vue、datav、Echart 框架的物联网可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、数据滚动配置，内部图表自由替换、Mixins注入等功能，持续更新....

效果如下，技术点主要使用了

<template> <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"> <component :is="components" :data="list" :class-option="defaultOption"> <ul class="right_center "> <li class="right_center_item" v-for="(item, i) in list" :key="i"> <span class="orderNum">{{ i + 1 }}</span> <div class="inner_right"> <div class="dibu"></div> <div class="flex"> <div class="info"> <span class="labels ">设备ID：</span> <span class="contents zhuyao"> {{ item.serialNumber }}</span> </div> <div class="info time"> <span class="labels">时间：</span> <span class="contents" style="font-size:12px"> {{ item.createTime }}</span> </div> <div class="info"> <span class="labels1" >属性上报</span> </div> </div> <div class="flex"> <div class="info"> <span class="labels">设备名称：</span> <span class="contents "> {{ item.deviceName }}</span> </div> <div class="info"> <span class="labels">属性：</span> <span class="contents ciyao" style="font-size:12px"> {{ item.identity }}</span> </div> <div class="info"> <span class="labels">数值：</span> <span class="contents warning"> {{ item.logValue}}</span> </div> </div> </div> </li> </ul> </component> </div> <Reacquire v-else @onclick="getData" style="line-height:200px" /></template><script>import { currentGET } from '@/api/bigScreen/modules'import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式import Kong from '../components/kong.vue'import {listAllDeviceLog} from "@/api/iot/deviceLog";export default { components: { vueSeamlessScroll, Kong }, data() { return { list: [], pageflag: true, defaultOption: { ...this.$store.state.settings.defaultOption, limitMoveNum: 3, singleHeight: 250, step:0, }, queryParams: { pageNum: 1, pageSize: 20 }, }; }, computed: { sbtxSwiperFlag() { let ssyjSwiper = this.$store.state.settings.ssyjSwiper if (ssyjSwiper) { this.components = vueSeamlessScroll } else { this.components = Kong } return ssyjSwiper } }, created() { this.getData() }, mounted() { }, beforeDestroy() { this.clearData() }, methods: { clearData() { if (this.timer) { clearInterval(this.timer) this.timer = null } }, switper() { if (this.timer) { return } let looper = (a) => { this.getData() }; this.timer = setInterval(looper, this.$store.state.settings.leftBottomTime); }, getData() { this.pageflag = true listAllDeviceLog(this.queryParams).then(res => { if (!this.timer) { console.log("检测数据", res); } if (res.code == 200) { this.list = res.data; this.defaultOption.step=this.$store.state.settings.defaultOption.step this.switper(); } else { this.pageflag =false; this.$Message.warning(res.msg); } }) }, },};</script><style lang='scss' scoped>.right_center { width: 100%; height: 100%; .right_center_item { display: flex; align-items: center; justify-content: center; height: auto; padding: 10px; font-size: 14px; color: #fff; .orderNum { margin: 0 20px 0 -20px; } .inner_right { position: relative; height: 100%; width: 400px; flex-shrink: 0; line-height: 1.5; .dibu { position: absolute; height: 2px; width: 104%; background-image: url("../../../assets/bigScreen/img/zuo_xuxian.png"); bottom: -12px; left: -2%; background-size: cover; } } .info { margin-right: 10px; display: flex; align-items: center; .labels { flex-shrink: 0; font-size: 12px; color: rgba(255, 255, 255, 0.6); } .labels1 { flex-shrink: 0; font-size: 12px; // color: rgba(255, 255, 255, 0.6); color:#E6A23C; } .zhuyao { // color: $primary-color; font-size: 15px; } .ciyao { color: rgba(255, 255, 255, 0.8); } .warning { color: #E6A23C; font-size: 15px; } } }}.right_center_wrap { overflow: hidden; width: 100%; height: 250px;}.overflow-y-auto { overflow-y: auto;}.typeRed { color: #fc1a1a;}</style>

后端代码增加如下

/** * 查询所有设备日志列表，用于大屏显示 */ @GetMapping("/listAllDevice") public AjaxResult listAllDevice() { startPage(); List<DeviceLog> list = deviceLogService.selectAllDeviceLogList(); return AjaxResult.success(list); }

间隔时间：

this.$store.state.settings.leftBottomTime

import defaultSettings from '@/settings'const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettingsconst storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''const state = { title: '', theme: storageSetting.theme || '#409EFF', sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle, sbtxSwiper: true,//设备提醒轮播 ssyjSwiper:true,//实时预警轮播 isScale:true,//是否进行全局适配 defaultOption: { step: 4.4, // 数值越大速度滚动越快 hoverStop: true, // 是否开启鼠标悬停stop openWatch: true, // 开启数据实时监控刷新dom direction: 1, // 0向下 1向上 2向左 3向右 limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 3000 // 单步运动停止的时间(默认值1000ms) }, echartsAutoTime:3000,//echarts 图自动请求接口时间 leftBottomTime:3000,//echarts 图自动请求接口时间}const mutations = { CHANGE_SETTING: (state, { key, value }) => { if (state.hasOwnProperty(key)) { state[key] = value } }}const actions = { // 修改布局设置 changeSetting({ commit }, data) { commit('CHANGE_SETTING', data) }, // 设置网页标题 setTitle({ commit }, title) { state.title = title }}export default { namespaced: true, state, mutations, actions}