使用vue-seamless-scroll,数据不能循环轮播
<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>【
·
<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}} <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后就是空白,不能从开始衔接
解决方案:
- 如果你是用的动态数据的话。你需要定义一个本地变量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了
- 在有新的数据不断向数组中加入的时候需要通过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
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)