vue使用插件vue-seamless-scroll无限滚动列表

链接: vue-seamless-scroll插件文档

1. 安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 引入

1、main.js全局引入

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

2、局部引入

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
    vueSeamlessScroll
  },

3. 使用

<div class="divBox">
      <vue-seamless-scroll
            v-if="statusData.length > 0"
            :data="statusData"
            :class-option="scrollStatus(statusData)"
     >
           <div
                v-for="(item, index) in statusData"
                :key="index"
           >
                   
          </div>
     </vue-seamless-scroll>
</div>



computed: {
    scrollStatus() {
      return (arr) => {
        return {
          step: 0.3, // 数值越大速度滚动越快
          limitMoveNum: arr.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: false, // 是否开启鼠标悬停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)
        };
      };
    },
}

//最外层容器需要手动设置width、height、overflow:hidden
.divBox{
   height: 250px;
   width:300px;
   overflow: hidden;
}

vue-seamless-scroll无限滚动列表