vue-seamless-scroll关于设置滚动条数设置无效

最新推荐文章于 2024-06-11 10:48:00 发布
最新推荐文章于 2024-06-11 10:48:00 发布
阅读量4.1k 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webopenfather/article/details/107227728
版权

## vue-seamless-scroll关于设置滚动条数设置无效

今天根据需求做一个列表自动滚动的这样一个功能，
用的是一个无缝滚动的一个插件vue-seamless-scroll，非常的nice！
但是在使用的过程中遇到了一个问题，页面一直滚动数据1–5条，但是我从后端拿到的是11条数据，各种百度无果。。。各种烦

##推测各种可能，最后发现，这里有个坑，就是css的样式问题。
解决方案是下图的红线部分class的高度设置死了。应该给她它一个
width:auto;。问题就解决了。。。看了半天好像在vue-seamless-scroll的各种解决问题里面还没有人来填这个坑，就过来补发一下在这里插入图片描述

在这里插入图片描述

神奇的马拉马拉
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
VUE vue-seamless-scroll自动滚动,当数据量比较少不让它自动滚动
孙叫兽的博客
04-29 6307
div <vue-seamless-scroll :data="tableDataLeft0" class="seamless-warp" :class-option="classOption"
vue vue-seamless-scroll 数据滚动
03-28
vue vue-seamless-scroll 数据滚动 list 数据量少 时，不运行滚动
vue-seamless-scroll 单个item较高数据量较少无法滚动问题
weixin_38196055的博客
03-01 1240
vue-seamless-scroll 单个item较高，数据量较少无法滚动问题
vue-seamless-scroll在小米手机上显示不正常 显示出两行的问题
weixin_44492275的博客
07-06 970
起因是 本来设置vue-seamless-scroll进行一行的向左循环滚动 但是在小米手机上他却显示了两行而且 并不是无缝滚动 网上查了好长时间没得到解决办法 只好自己分析 首先是vue-seamless-scroll是通过生成一个跟数据一毛一样的一个内容区 两行轮播并且是基于float:left 让两行变为一行的 但是他的问题就是需要宽够才能到一行 所有 出现两行 可能是因为 他的宽度计算的不正确 基于这个思路我添加了一个99999px的宽度 .swiperWidth{ >div{
vue实现无缝滚动 vue-seamless-scroll插件
最新发布
Lucky_girl_wan的博客
06-11 602
拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向，可选值up，down，left，right。通过v-model控制动画滚动与停止，默认开始滚动。开启滚动的数据量，只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启。无缝滚动列表数据，组件内部使用列表长度。动画循环次数，默认无限循环。第二步：引用组件全局引用。
vue的无缝滚动插件vue-seamless-scroll的使用
qq_40434213的博客
10-20 972
vue的无缝滚动插件vue-seamless-scroll的使用 安装三部曲 1、npm install vue-seamless-scroll --save 2、import scroll from ‘vue-seamless-scroll’; 3、vue.use(scroll) 使用 <template> <vue-seamless-scroll :data="data" :class-option="classOption" class="seamless-warp">
vue-seamless-scroll数据量少时，暂停滚动，继续滚动
weixin_45532305的博客
01-10 3266
获取数据后并渲染到dom后，查看最后一个子元素是否在父元素的可视范围内，如果在就禁止vue-seamless-scroll复制数据和自动滚动行为，反之则允许。大屏项目：指定dom元素内，如果子元素内容过多，超出父元素的最高高度，可以发生自动滚动；如果子元素内容没有超出父元素的最高高度，不可以发生自动滚动。通过最后一个子元素offsetTop和父元素的clientHeight比较。
vue-seamless-scroll插件文字滚动条数不全/变少
weixin_64475163的博客
03-31 441
但是在使用过程中发现滚动条数与实际渲染上去的滚动条数不同，经过查找原因是因为css样式上的问题。百度上查找到有vue-seamless-scroll插件，可以实现这个功能。，但是我设置了没有效，猜想应该是我这个配置是向上滚动，所以改成。根据需求做一个列表自动滚动的这样一个功能。ps: 搜索到的解决文章是要写。
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-happy-scroll:基于vue2.0实现的滚动条插件。scroll component for vue2.0
04-14
vue happy scroll Chrome Firefox Safari Edge IE √ √ √ √ 9 √10 √11 √ 当前版本不支持移动端(还未在移动端进行过测试)。The current version not support SP(I haven't tested it on the ...vue-happy-scrol
无缝滚动插件vue-seamless-scroll插件使用及问题
weixin_44258964的博客
07-10 2200
一、使用 html // <vue-seamless-scroll :data="projectDesList"//插入的数据 :class-option="classOption" //参数配置，计算属性 class="seamless-warp"//样式设置一定要有高度 @mouseover.native="hoverStatus" @mouseout.native="nohoverStatus" > <ul class="item"&gt
vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）
m0_51431448的博客
01-29 4677
一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便。
vue-seamless-scroll插件无法滚动
weixin_45738653的博客
07-01 5307
近日，业务需要实现公告消息一直无缝滚动，我借助了vue-seamless-scroll插件，效果还不错，今天复盘一下。 一、安装 npminstallvue-seamless-scroll--save 二、vue页面引用 import vueSeamlessScroll from 'vue-seamless-scroll' 三、注册组件 components vueSeamlessScroll } 基本引入都完成，然后，开始我们的结构（HTML）： data 为绑定的数...
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3020
1、npm安装 npm install vue-seamless-scroll --save 2、引入 import scroll from 'vue-seamless-scroll' 官方demo:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 3、使用 ...
【vue-seamless-scroll bug问题记录以及解决】
huangst1124的博客
02-18 3675
vue-seamless-scroll bug问题记录以及解决方案
解决vue3-seamless-scroll动态数据不滚动的方法
夜晚的微冷博客
06-22 2525
vue3-seamless-scroll动态数据无法滚动的解决方法
VueSeamlessScroll 无缝滚动点击事件不生效
weixin_43657954的博客
05-18 1725
1、给外面div添加事件委托。3、跳转路由报错解决。
vue-seamless-scroll设置滚动条数无效
07-27
你好！关于Vue Seamless Scroll插件设置滚动条数无效的问题，可能有几个原因导致。 首先，确保你已正确安装了Vue Seamless Scroll插件，并在Vue项目中成功引入和注册。你可以检查一下在main.js或者需要使用该插件的组件中是否已经正确引入和注册。 其次，检查你是否正确设置了滚动条数。Vue Seamless Scroll插件通过props属性来接收参数，其中可以设置的属性之一是"scroll-count"。你可以在使用插件的地方或者父组件中添加一个属性来传递滚动条数值。 例如，在父组件中，你可以这样传递滚动条数值： ``` <template> <vue-seamless-scroll :scroll-count="3"> <!-- 内容 --> </vue-seamless-scroll> </template> ``` 另外，确保你在设置滚动条数值时，没有被其他样式或脚本覆盖或修改。有时候，其他CSS样式或JavaScript脚本可能会干扰滚动条的效果。 最后，如果以上方法都没有解决问题，可能是由于版本兼容性或插件本身存在bug导致的。你可以尝试查看插件的文档和社区讨论，寻找是否有其他人遇到了相同的问题，并找到解决方法或报告bug。 希望以上信息对你有帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值