<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后就是空白,不能从开始衔接

解决方案:

  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了

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

前往低代码交流专区

更多推荐