vue 列表无缝滚动插件vue-seamless-scroll

安装插件

npm install vue-seamless-scroll --save

引入插件

1.main.js引入 全局使用

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

2.按需引入
在需要的页面引入

  import vueSeamlessScroll from "vue-seamless-scroll";

components中注册

  components: {
      vueSeamlessScroll 
  },

配置项

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

绑定元素

            <div class="main">
              <vue-seamless-scroll :data="dataList" :class-option="classOption">
                <ul class="scroll-box">
                  <li v-for="(item,index) in dataList" :key="index">
                    <div>
                      {item.name}}
                    </div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>

css设置

最外层包裹容器设置

.main{
	  width：500px;
      height:500px;
	  overflow: hidden;
 }