使用vue-seamless-scroll，数据不能循环轮播

Question

<el-tab-pane label="待办1" name="three">

        <vue-seamless :data="toldist" class="seamless-warp" :class-option="classOption">
          <ul>
            <li v-for="(item,index) in toldist" :key="index" >
              <router-link :to="item.url"> <span>【{{item.type}}】{{item.name}}&nbsp;<i>({{item.number}})</i></span></router-link>
            </li>
          </ul>
        </vue-seamless>
      </el-tab-pane>
      

classOption() {

  return {
    step: 1, // 数值越大速度滚动越快
    hoverStop: true, // 是否开启鼠标悬停stop
    openWatch: true, // 开启数据实时监控刷新dom
    limitMoveNum: 30,
   /* step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: this.toldist.length, // 开始无缝滚动的数据量 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)*/
  }
}

.seamless-warp {
height: 229px;
overflow: hidden;
}
初步设计30个数据，滚动到30后就是空白，不能从开始衔接

Answer 1

如果你是用的动态数据的话。你需要定义一个本地变量dataList，然后在mounted中把动态数据赋值给dataList，然后在这里面

<vue-seamless-scroll v-if="dataList.length>0" :data="data" :class-option="optionHover" class="jj-seamless-warp">

加一个v-if，就可以了。这种情况是因为vue-seamless-scroll在复制的时候，数据还没过来导致的，v-if一下，确保数据过来了再复制就ok了

Answer 2

可能列表里面的数量小于limitMoveNum限制开始滚动的数量

Answer 3

在有新的数据不断向数组中加入的时候需要通过v-if来重绘这个组件让它再次初始化计算新的高度循环

<vue-seamless-scroll v-if="update" :data="dataList" :class-option="optionHover" class="seamless-warp">
 <ul class="item">
 <li v-for="(item,index) in dataList" :key="index">
 {{ item.info }}
    </li>
 </ul>
</vue-seamless-scroll>

setUpdate() {
 this.update = false
 this.$nextTick(() => {
 this.update = true
 })
},