vue-seamless-scroll无缝滚动组件

最新推荐文章于 2024-08-05 08:00:00 发布

@@小旭

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量443

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Sunqianxu/article/details/135991791

版权

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2、引入

import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    vueSeamlessScroll
  },
}

3、使用

<vue-seamless-scroll :data="alarmsData" :class-option="defaultOpt02">
    <ul v-for="(item,index) in alarmsData" :key="index">
        <li>
           <span>编号:</span>
           <span>{{ item.alarmId }}</span>
         </li>
         <li>
            <span>类型:</span>
            <span>{{ item.alarmLevel }}</span>
          </li>
          <li>
             <span>名称:</span>
             <span>{{item.alarmTitle }}</span>
          </li>
          <li>
              <span>设备:</span>
              <span>{{item.eqpTypeName }}</span>
           </li>
     </ul>
</vue-seamless-scroll>


data(){
    return {
        alarmsData: [
            {
                alarmId: '1',
                alarmLevel: '2',
                alarmTitle: '3',
                eqpTypeName: '4',
            },
            {
                alarmId: '1',
                alarmLevel: '2',
                alarmTitle: '3',
                eqpTypeName: '4',
            },
            {
                alarmId: '1',
                alarmLevel: '2',
                alarmTitle: '3',
                eqpTypeName: '4',
            },
        ]
    }
}

computed: {
    defaultOpt02() {
       return {
          step: 0.3, // 数值越大速度滚动越快
          limitMoveNum: 3, // 开始无缝滚动的数据量 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: 2000 // 单步运动停止的时间(默认值1000ms)
       };
    }
},

4、效果（向上无缝滚动）