关于 vue-seamless-scroll 的问题采坑
标题# 项目场景:本文描述了在引用 vue-seamless-scroll 的过程中遇到的一些常见问题问题描述此插件在使用的过程中如果条数过少,要阻止循环滚动,不能够持续复制滚动原因分析此问题主要是因为插件自动复制了我们的一个列表,两个列表持续滚动,如下图所示解决方案给 class-option 的属性增加 limitMoveNum设置成动态的,且根据何时显示何时初始化,因为我的页面里是个弹框,刚
·
项目场景:
本文描述了在引用 vue-seamless-scroll 的过程中遇到的一些常见问题
问题一描述
此插件在使用的过程中如果条数过少,要阻止循环滚动,不能够持续复制滚动
原因分析
此问题主要是因为插件自动复制了我们的一个列表,两个列表持续滚动,如下图所示解决方案
给 class-option 的属性增加 limitMoveNum
设置成动态的,且根据何时显示何时初始化,因为我的页面里是个弹框,刚开始就初始化数据的话,滚动循环会不规律
动态设置 limitMoveNum
limitMoveNum: this.listData.length < 5 ? 5: this.listData.length
5是我显示条数的最多个数,多余就开始循环滚动
问题二描述
还有一个常见问题就是点击事件不管用
原因分析
原因同上,就是因为复制了两个相同的列表进行滚动,复制出来的那个列表并没有添加上点击事件
解决方案
思路就是 绑定了 data-obj 用字符串去传值 ,通过点击父元素,获取子元素的传值
<div @click="clickProps($event)">
<vue-seamless-scroll
:data="listData"
class="seamless-warp"
:class-option="optionStep"
>
<ul class="items">
<li v-for="(item, index) in listData" :key="index" class="item" :hover="item.ggbt" :data-obj="JSON.stringify(item)" :id="index+1">
{{ item.ggbt }}
</li>
</ul>
</vue-seamless-scroll>
</div>
clickProps(event) {
let item = JSON.parse(event.target.dataset.obj)
this.fetchDetail(item.id)
}
更多推荐
已为社区贡献10条内容
所有评论(0)