在使用SeamlessScroll组件时，踩过的坑

最新推荐文章于 2024-05-09 11:44:02 发布
最新推荐文章于 2024-05-09 11:44:02 发布
阅读量622 收藏 6
点赞数 7
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53164768/article/details/135295545
版权

今天在这个组件，正常传值的时候，发现不自动滚动，以为时数据错了，才发现，底层封装组件的时候，是靠计算属性进行计算，但是传值的是异步请求，后端传值过来的，因此，传值过去是空值，导致后续的判断不执行，从而不滚动，

解决方法是

在他的源码里面  对判断这块的逻辑更换一下

同理vue3-seamless-scroll和vue-seamless-scroll组件不滚动，实际是一样的原理，异步请求的数据较慢，组件获取的是一个空值，导致不滚动

前端小鸡
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现循环滚动列表
01-19
2.文件中引入，组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <vue-seamless-scroll :data=CardPartsStatisticsList class=seamless-warp :class-option=classOpti
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
都随它大小便吧
07-17 7905
有需求需要用到这个大腿们设计的无缝滚动插件（vue3-seamless-scroll），效果不错，记录一下使用过程。本插件不需要全局引用，只需要局部引用到页面中即可，主要有三个步骤，分别是引入、注册、使用。
vue3-seamless-scroll无缝滚动
weixin_53545517的博客
07-31 831
title: “Vue3.0 无缝滚动组件展示数据第1条”,title: “Vue3.0 无缝滚动组件展示数据第2条”,title: “Vue3.0 无缝滚动组件展示数据第3条”,title: “Vue3.0 无缝滚动组件展示数据第4条”,title: “Vue3.0 无缝滚动组件展示数据第5条”,title: “Vue3.0 无缝滚动组件展示数据第6条”,title: “Vue3.0 无缝滚动组件展示数据第7条”,title: “Vue3.0 无缝滚动组件展示数据第8条”,
vue3-seamless-scroll 无线滚动
qq_57613837的博客
04-18 1419
limitScrollNum 开启滚动的数据量，只有列表长度大于等于该值才会滚动。singleHeight and singleWidth 是否开启 rem 度量。direction 控制滚动方向，可选值up，down，left，right。v-model 通过v-model控制动画滚动与停止，默认开始滚动。list 无缝滚动列表数据，组件内部使用列表长度。singleHeight 单步运动停止的高度。singleWidth 单步运动停止的宽度。count 动画循环次数，默认无限循环。
vue3-seamless-scroll实现循环滚动
最新发布
m0_65745337的博客
05-09 540
3、js中引入：import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
无限滚动vue3SeamlessScroll和vueSeamlessScroll组件的使用
weixin_53852284的博客
01-10 1175
安装：npm install vue-seamless-scroll --save 或者 yarn add vue-seamless-scroll。安装：npm install vue3-seamless-scroll 或者 yarn add vue3-seamless-scroll。vue3中使用组件 vue3-seamless-scroll。在main.js中引用vue3SeamlessScroll。vue2中使用组件 vue-seamless-scroll。在页面中直接引用即可。
vue-seamless-scroll列表循环滚动插件
Lval的博客
11-26 3644
安装 npm install vue-seamless-scroll --save 引入 import vueSeamlessScroll from "vue-seamless-scroll"; export default { components: { // circleBg, vueSeamlessScroll } } 使用 <vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="clas
vue大屏开发系列—列表无缝滚动之vue-seamless-scroll
热门推荐
鲸鱼姐的专栏
11-01 4万+
vue大屏—列表无缝滚动之vue-seamless-scroll
vue3 vue-seamless-scroll
m0_71349739的博客
01-06 8665
最近开发过程中做大屏的页面，需求用到无缝滚动列表，发现一个特别好用的插件，分享给大家，欢迎评论区讨论话题。在main.js中引用vue-seamless-scroll/src。，vue3版本引用插件不同处。
vue-seamless-scroll插件，使用详细（ vue-seamless-scroll 无缝滚动）
weixin_65793170的博客
03-07 2万+
⭐简述：vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，基本能满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下，使用详细；1、安装相关依赖；2、全局引入组件；或则局部引入；3、组件使用，配置相关属性；
vue-seamless-scroll无缝滚动组件使用方法详解+解决轮播空白缝隙问题（最后面）
SYQ15544423296的博客
04-18 8910
vue-seamless-scroll详细教程，包括滚动+解决空白问题
vue3-seamless-scroll 无缝滚动组件
HRSR1314的博客
03-19 2188
vue3-seamless-scroll 无缝滚动组件的使用教程
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
仙魁XAN
08-05 1万+
Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue 中添加 vue-seamless-scroll，简单实现自动无缝滚动的效果，并对应添加点击事件 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。vue-seamless-scroll 是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能。...
Vue3无缝滚动----vue3-seamless-scroll
lxk116688的博客
06-30 9363
main.js中引入 使用 组件配置 listv-modeldirectionisWatchhovercountlimitScrollNumstep指南在这里
vue-seamless-scroll的使用以及实例
freeherotoday的博客
10-22 2万+
vue-seamless-scroll介绍 vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能 安装 ***Npm *** npm install vue-seamless-scroll --save 引入组件 import vueSeamlessScroll from 'vue-seamless-scroll' components:
vue-seamless-scroll滚动
每一次跌倒都是为了华丽的站起来。
02-16 2876
vue-seamless-scroll使用-table表格滚动
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（二）——vue-seamless-scroll中click点击事件无效的处理方法 & 事件委托之事件捕获的具体应用
weixin_44867717的博客
11-25 4412
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（二）——vue-seamless-scroll中click点击事件无效的处理方法 使用vue-seamless-scroll实现数据无缝连续滚动 1、原理 无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。 基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动 2、遇到的问题 当ul1中的数据未滚动完时,ul2 部分的click事件不起作用，无法实现点击这行功能 （
vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决
weixin_46995731的博客
09-28 3234
最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问题的解决方法记录一下.思路:在外边写个弹框,在组件上挂上,mouseover,mouseout事件,通过鼠标事件控制弹框的显隐,代码在上边大家可以去看看.开始的思路是在表格行上添加@click事件就行了,这种方式不可行,发现有的行点击事件挂载不上,后来看了看,明白了大概原因,
vue3-seamless-scroll 自动横向滚动 滚动插件
linx_i的博客
05-15 3314
Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。
Vue3SeamlessScroll怎么实现横向滚动
04-24
Vue3SeamlessScroll可以实现横向滚动，具体实现方法如下： 1.引入Vue3SeamlessScroll组件 import Vue3SeamlessScroll from 'vue3-seamless-scroll' 2.在Vue组件中使用Vue3SeamlessScroll标签 <vue3-seamless-scroll :scroll-list="scrollList" :scroll-delay="2000" :scroll-direction="'x'"/> 3.设置scrollList属性为需要滚动的列表数组 data() { return { scrollList: [ { name: 'item1', image: '1.png' }, { name: 'item2', image: '2.png' }, { name: 'item3', image: '3.png' }, { name: 'item4', image: '4.png' }, { name: 'item5', image: '5.png' }, { name: 'item6', image: '6.png' }, { name: 'item7', image: '7.png' }, { name: 'item8', image: '8.png' }, { name: 'item9', image: '9.png' }, { name: 'item10', image: '10.png' } ] } } 4.设置scroll-delay属性为每次滚动间隔时间（单位为毫秒） 5.设置scroll-direction属性为水平(x)滚动，还是垂直(y)滚动 以上就是Vue3SeamlessScroll实现横向滚动的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值