大屏数据滚动

原创已于 2023-10-08 16:52:14 修改 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-13 15:39:03 首次发布

vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，使用requestAnimationFrame实现流畅滚动效果。它支持上下左右滚动，单步滚动，以及手动切换方向。组件可配置包括滚动速度、数据实时监控、鼠标悬停暂停等功能。

vue-seamless-scroll介绍

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

安装

***Npm ***

npm install vue-seamless-scroll --save

引入组件

import vueSeamlessScroll from 'vue-seamless-scroll'
 components: {

    vueSeamlessScroll
  },

配置参数

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
 
        },

<vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption"  >
            <ul class="ul-scoll">
                <li v-for="(item, index) in tempArray" :key='index'>
                  <div class="item" >
                   <div :class="((item.Isnormal=='断联')||(item.Isnormal=='异常'))?'top top-1':'top top-2'"><span>{{index+1}}</span> </div>
                    <div class="pro-name"  :data-id="index" :data-index="item.C_Code" :data-model="item">{{item.C_Code}}</div>
                    <div class="pro-name">{{item.C_TaskNum}}</div>
                    <div class="num">{{item.C_Location}}</div>
                    <div class="num">{{item.Isnormal}}</div>
                    <div class="num">{{item.C_Status}}</div>
                    <div class="num">{{item.C_IsLock}}</div>
                    <div class="num">{{item.C_Electricity}}</div>
                  </div>
                </li>
            </ul>
        </vue-seamless-scroll>