Vue实现循环滚动之vue-seamless-scroll的使用

Vue中我们拿到接口返回的数据之后，进行循环滚动操作，可以使用vue-seamless-scroll 实例文档，具体如下

1、安装

cnpm install vue-seamless-scroll --save

2、引用

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

3、使用

<!-- <template>中 -->
 <vue-seamless-scroll
  :data="list"
  :class-option="classOption"
  class="seamless-warp"
>
   <!-- 你要循环的内容 list是你要循环滚动的数组 接口拿到数据后直接赋值给list即可  classOption是配置项-->      
</vue-seamless-scroll>

//设置配置项，放在计算属性computed中
computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.list.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)
      };
    },
},