解决vue3-seamless-scroll动态数据不滚动的方法

evoooCodex

已于 2022-06-23 10:18:27 修改

阅读量2.6k

点赞数

分类专栏： vue3 文章标签：前端 vue.js

于 2022-06-22 19:11:06 首次发布

本文链接：https://blog.csdn.net/weixin_38371491/article/details/125415102

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue3项目中使用无缝滚动组件，关键点在于为滚动数据提供初始值。通过参考插件作者的GitHub仓库，了解到在组件中加载数据的方法，并提供了具体的代码片段作为示例。遇到问题的开发者可以通过设置默认滚动数据(defaultscroll.json)来解决无缝滚动的显示问题。

摘要由CSDN通过智能技术生成

话不多说，直接上配置讲方法。

package.json

调用过程就参考了插件作者的git，链接在这里

GitHub - xfy520/vue3-seamless-scroll: Vue3.0 无缝滚动组件

具体片段如下

红色框就是用于加载到滚动组件里的数据，绿色框就是自定的获取这个list的方法。

关键在于，一定要给用于加载到滚动组件里面的数据一个初值！

即上图中的defaultscroll，

defaultscroll.json的内容随便填，只要是合法的json就行，我这里用的例子也放出来

快试一试，这个我找了半天没找到解决办法的问题，无意间试出来了，hhh

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

evoooCodex

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
解决vue3-seamless-scroll动态数据不滚动的方法

vue3-seamless-scroll动态数据无法滚动的解决方法
复制链接

扫一扫

专栏目录

Vue3 使用vue-seamless-scroll 轮播组件报错问题解决

朝花夕拾的博客

07-11

1907

这里写的小写v就会报上面的错误改成大写就好了。如下错误看引入的组件名称是否写错。SFC(单文件)注册。

VUE vue-seamless-scroll自动滚动,当数据量比较少不让它自动滚动

孙叫兽的博客

04-29

6346

div <vue-seamless-scroll :data="tableDataLeft0" class="seamless-warp" :class-option="classOption"

1 条评论您还未登录，请先登录后发表或查看评论

vue vue-seamless-scroll 数据滚动

03-28

vue vue-seamless-scroll 数据滚动 list 数据量少时，不运行滚动

vue-seamless-scroll 不自动滚动解决方法

qq_37025418的博客

08-31

8012

项目场景：在子页面使用vue-seamless-scroll 问题描述：没有自动滚动，鼠标移上去，才触发自动滚动原因分析：数据需要在页面挂载好就赋值，否则页面在加载完成后，数据呜发自动滚动解决方案：在mounted或data种给list赋值，下面介绍一下vue-seamless-scroll 的使用方法 1.安装vue-seamless-scroll npm install vue-seamless-scroll --save　 2.引入主键 import vueSea

vue-seamless-scroll组件解决出现数据重复滚动的问题

最新发布

weixin_51185283的博客

06-20

279

vue-seamless-scroll组件解决出现数据重复滚动的问题

vue-seamless-scroll插件文字滚动条数不全/变少

weixin_64475163的博客

03-31

472

但是在使用过程中发现滚动条数与实际渲染上去的滚动条数不同，经过查找原因是因为css样式上的问题。百度上查找到有vue-seamless-scroll插件，可以实现这个功能。，但是我设置了没有效，猜想应该是我这个配置是向上滚动，所以改成。根据需求做一个列表自动滚动的这样一个功能。ps: 搜索到的解决文章是要写。

vue-seamless-scroll无法实现滚动

luoqiao26的博客

06-05

339

不能用固定的ul和li，需要用v-for列表循环，且在中必须传值，最关键的一步就是:data="items"使用vue-seamless-scroll不能滚动的经验。

vue-seamless-scroll无法滚动

EIERICA的博客

11-07

1222

比如使用v-if、v-show进行判断的，在页面加载后没有显示。删掉后可能就会正确进行滚动，可以使用visible:hidden代替。首先，先检查样式，再检查配置，如果都没问题的话，看看在页面加载完成后，滚动区域是否显示在页面上。

使用vue-seamless-scroll无法滚动问题

HHHHH2187的博客

10-23

1768

【代码】使用vue-seamless-scroll无法滚动问题。

vue-seamless-scroll +element表格获取后台数据无法滚动或弹回顶部

weixin_51935690的博客

01-08

2527

今天出现一个bug，当在vue-seamless-scroll中把数据放入wholeflowtableData: [],没有问题，可以正常轮播。但是当动态获取后端数据时缺会出现弹回顶部的问题问题原因：由于拿到后端数据后我们用push方法一个个push进wholeflowtableData，导致它高度的获取出现问题，从而div发生溢出，无法进行滚动解决方案： 1.定义一个新的数组arr去接收，然后再利用拷贝，将arr这个数组的内容一次性的去拷贝到wholeflowtableData当中，就不会出现如上

vue的无缝滚动组件vue-seamless-scroll实例

08-28

Vue 无缝滚动组件 Vue-Seamless-Scroll 实例 Vue-Seamless-Scroll 是一个基于 Vue.js 的无缝滚动组件，提供了简洁易用的 API，帮助开发者快速实现无缝滚动效果。本文将详细介绍 Vue-Seamless-Scroll 的用法和配置。...

vue-seamless-scroll:A simple, seamless scrolling for Vue.js vue无缝滚动component

05-10

vue-seamless-scroll Vue.js的简单无缝滚动特征初始配置支持兼容多种平台多技术堆栈版本支持文献资料要查看和文档，请访问。关怀如果您希望js无缝滚动（无依赖关系），则可以切换到此处。。贡献欢迎...

seamless-scroll:js seamless scrolling（js无缝滚动）

05-12

无缝滚动js Seamless-scroll插件 :sheaf_of_rice: | :blue_book:浏览器支持 IE 火狐浏览器 Chrome合金苹果浏览器的iOS 安卓IE7 + ✓ ✓ ✓ ✓ ✓ 不支持移动手势。安装NPMnpm install seamscroll --save CDN ...

vue实现动态添加数据滚动条自动滚动到底部的示例代码

08-27

Vue 实现动态添加数据滚动条自动滚动到底部的示例代码在 Vue 中实现动态添加数据滚动条自动滚动到底部是一种常见的需求，特别是在聊天页面中。为此，我们可以使用 watch 方法来监听数据变量的变化，并动态添加滚动...

vue-seamless-scroll实现根据数据量动态判断是否滚动

Mr_songb的博客

07-10

653

vue-seamless-scroll实现根据数据量判断是个否滚动

vue-seamless-scroll插件无法滚动

weixin_45738653的博客

07-01

5326

近日，业务需要实现公告消息一直无缝滚动，我借助了vue-seamless-scroll插件，效果还不错，今天复盘一下。一、安装 npminstallvue-seamless-scroll--save 二、vue页面引用 import vueSeamlessScroll from 'vue-seamless-scroll' 三、注册组件 components vueSeamlessScroll } 基本引入都完成，然后，开始我们的结构（HTML）： data 为绑定的数...

vue-seamless-scroll数据量少时，暂停滚动，继续滚动

weixin_45532305的博客

01-10

3418

获取数据后并渲染到dom后，查看最后一个子元素是否在父元素的可视范围内，如果在就禁止vue-seamless-scroll复制数据和自动滚动行为，反之则允许。大屏项目：指定dom元素内，如果子元素内容过多，超出父元素的最高高度，可以发生自动滚动；如果子元素内容没有超出父元素的最高高度，不可以发生自动滚动。通过最后一个子元素offsetTop和父元素的clientHeight比较。

vue3实现数据大屏内数据向上滚动，鼠标进入停止滚动 vue3+Vue3SeamlessScroll

m0_72929120的博客

11-15

1919

【代码】vue3实现数据大屏内数据向上滚动，鼠标进入停止滚动 vue3+Vue3SeamlessScroll。

vue-seamless-scroll 单个item较高数据量较少无法滚动问题

weixin_38196055的博客

03-01

1262

vue-seamless-scroll 单个item较高，数据量较少无法滚动问题

vue3-seamless-scroll不滚动

09-10

你好！对于vue3-seamless-scroll插件不滚动的情况，有几个可能的原因和解决方案可以尝试： 1. 检查是否正确引入了插件：首先确保你已经正确地引入了vue3-seamless-scroll插件，并在项目中正确注册了该插件。可以通过查看相关文档或示例代码来确认这一点。 2. 检查滚动容器的高度和内容：如果滚动容器没有设置高度或者内容不足以触发滚动，可能会导致不滚动的情况。请确保滚动容器的高度被设置为一个具体的值，并且内容超过容器高度，以便能够触发滚动。 3. 检查插件的配置选项：vue3-seamless-scroll插件通常提供了一些配置选项，例如滚动速度、滚动方向等。请确保你已经正确配置了这些选项，以满足你的需求。 4. 检查是否存在样式冲突：有时候，其他CSS样式可能会影响到插件的正常滚动。可以尝试禁用或排除其他样式，看是否能够解决问题。如果以上方法都没有解决问题，建议你参考插件的官方文档、GitHub仓库或者提问社区，以获取更多的帮助和支持。