项目场景：

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

关于 vue-seamless-scroll 的问题采坑相关推荐

vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不 ...
mui之 scroll采坑
scroll:区域滚动采坑一: 单纯的复制样式和结构 <div id="slider" class="mui-slider"><div id ...
RGBD三维重建——SeamlessTex运行环境配置（采坑指南）
文章链接:Seamless Texture Optimization for RGB-D Reconstruction Github链接:fdp0525/SeamlessTex 采坑准备安装cere ...
iOS 微信SDK1.8.6后需要UniversalLink解决方案及采坑记录
项目最初因审核原因,一直使用iOS原生分享, 最近因项目需求要求, 接入微信分享, 以为和原来的没有区别, 但是接入时才发现改动的地方还是挺多的, 主要是需要配置UniversalLink和提包时的一 ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
【TP3.2】模板 select选项采坑
1.TP3.2 模板 select 下拉框采坑 <div class="form-item"><label class="item-label" ...
MySQL单表数据量过千万，采坑优化记录，完美解决方案
MySQL单表数据量过千万,采坑优化记录,完美解决方案参考文章: (1)MySQL单表数据量过千万,采坑优化记录,完美解决方案 (2)https://www.cnblogs.com/ExMan/p/ ...
VS2015+MySql+EF6采坑经验总结
原文:VS2015+MySql+EF6采坑经验总结背景:VS2015+MySql+EF6(DB First) 采坑顺序:按照以前的记忆,操作依次如下: 1,安装 MySQL Connector/NE ...
mysql8.0.19.0_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
bootstrap-select采坑
bootstrap-select采坑 1.class="selectpicker" 普通的下拉框功能 2.title="请选择城市名称" title的作用与pa ...

关于 vue-seamless-scroll 的问题采坑

项目场景：

问题一描述

原因分析

解决方案

问题二描述

原因分析

解决方案

关于 vue-seamless-scroll 的问题采坑相关推荐

最新文章

热门文章