项目场景:

本文描述了在引用 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)
 }
Logo

前往低代码交流专区

更多推荐