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

daydayRen
  • 1
新手上路,请多包涵

<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;
}YE)281FQ6Y%JV[}WMDLN$1N.png
初步设计30个数据,滚动到30后就是空白,不能从开始衔接

1574740053(1).png

评论
阅读 2.1k
3 个回答
何故
  • 3
新手上路,请多包涵

如果你是用的动态数据的话。你需要定义一个本地变量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了

高兴
  • 1
新手上路,请多包涵

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

明月清风
  • 2
新手上路,请多包涵

在有新的数据不断向数组中加入的时候需要通过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
 })
},
宣传栏