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

目录

一 安装

二 使用

三 简单使用

四 应用

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 },

三 简单使用

四 应用

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

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

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

{{ i + 1 }}设备ID： {{ item.serialNumber }}时间： {{ item.createTime }}属性上报设备名称： {{ item.deviceName }}属性： {{ item.identity }}数值： {{ item.logValue}}
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.ssyjSwiperif (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 = truelistAllDeviceLog(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.stepthis.switper();}else{this.pageflag =false;this.$Message.warning(res.msg);}})},},};.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;}

后端代码增加如下

/** * 查询所有设备日志列表，用于大屏显示 */@GetMapping("/listAllDevice")public AjaxResult listAllDevice(){startPage();List 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, // 是否开启鼠标悬停stopopenWatch: true, // 开启数据实时监控刷新domdirection: 1, // 0向下 1向上 2向左 3向右limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.lengthsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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}