解决在选项卡中，只有默认选项里的vue-seamless-scroll可以滚动的问题

已于 2022-08-30 16:06:25 修改
阅读量650 收藏
点赞数
分类专栏： Web前端 文章标签： vue.js 前端 javascript
于 2022-08-30 16:02:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry_vicent/article/details/126605953
版权

参考的文章作者说她的vue-seamless-scroll无缝滚动不滚动是因为她的页面有切换按钮，原来用v-show的时候只有默认页面的可以滚动，改为v-if就可以了。

我的页面也是因为切换按钮的原因引起的不滚动，但是我的页面目前只能使用js，没法用v-show和v-if。所以最后我的解决办法是，将原来用js设置的display:block和none，改成设置高度height:100%和0，总算解决了。

参考原文：https://www.jianshu.com/p/091dd0e00a1f

cherry_vincent
关注
专栏目录
bug02：在页面传data，vue-seamle-scroll无缝滚动无效，文字不滚动
m0_50899555的博客
03-31 341
vue-seamless-scroll
【vue-seamless-scroll bug问题记录以及解决】
huangst1124的博客
02-18 3970
vue-seamless-scroll bug问题记录以及解决方案
`vue-seamless-scroll` 教程：搭建与配置详解
gitblog_00708的博客
08-09 911
vue-seamless-scroll 教程：搭建与配置详解 项目地址:https://gitcode.com/gh_mirrors/vu/vue-seamless-scroll 1. 项目目录结构及介绍 以下是vue-seamless-scroll项目的典型目录结构： vue-seamless-scroll/ ├── dist/ # 构建后的生产代码 ├── src/ ...
使用vue-seamless-scroll无法滚动问题
HHHHH2187的博客
10-23 2031
【代码】使用vue-seamless-scroll无法滚动问题。
vue-seamless-scroll无法滚动
EIERICA的博客
11-07 1276
比如使用v-if、v-show进行判断的，在页面加载后没有显示。删掉后可能就会正确进行滚动，可以使用visible:hidden代替。首先，先检查样式，再检查配置，如果都没问题的话，看看在页面加载完成后，滚动区域是否显示在页面上。
vue项目中使用vue-seamless-scroll遇到的坑
qq_36877078的博客
12-27 1830
参考版本号。
vue vue-seamless-scroll 数据滚动
03-28
vue vue-seamless-scroll 数据滚动 list 数据量少 时，不运行滚动
vue的无缝滚动组件vue-seamless-scroll实例
08-28
在 ES6 环境中使用 Vue-Seamless-Scroll 需要使用 Webpack 进行编译。 模板 以下是一个简单的示例模板： ```html <div class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue ...
vue-seamless-scroll:A simple, seamless scrolling for Vue.js vue无缝滚动component
05-10
vue-seamless-scroll Vue.js的简单无缝​​滚动 特征 初始配置支持 兼容多种平台 多技术堆栈版本支持 文献资料 要查看和文档，请访问 。 关怀 如果您希望js无缝滚动（无依赖关系），则可以切换到此处。 。 贡献 欢迎...
【Vue3】vue3-seamless-scroll实现无缝滚动+滚轮控制
weixin_45291798的博客
07-09 923
前言 … 目标创建一个vue3项目，在项目中安装第三方组件 1 安装2 引入并注册 3 使用组件 在正式开始之前，先看一下这个第三方组件有哪些参数或者属性 官方文档：vue3-seamless-scroll 组件配置以上仅列出了接下来可能用到的属性。这里用的是表格组件。 若直接将el-table表格插入到vue-seamless-scroll组件中，会导致el-table表格中的表头也会进行滚动，这不是想要的效果。 这里用两个el-table，一个保留表头部分，一个保留内容部分。保留内容部分的放入vue-s
VUE使用vue-seamless-scroll自动滚动表格数据，对表格数据排序无效的解决办法
孙叫兽的博客
04-27 3347
使用vue-seamless-scroll循环表格数据，建议使用v-for,ul li 的形式便于操作属性，elemengt ui table可能不好处理兼容性问题及属性设置，尤其是一个页面添加多个表格及效果。 VUE: 排序 this.$refs.seamlessScroll.reset() 效果图 ...
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden; .item li{ height: 50px; display: flex;
【vueSeamless】vue-seamless-scroll的各种问题及解决方案
weixin_45439337的博客
07-30 237
这个设置相当于将参数变成元素的属性，直接去找点击元素的属性即可。1，复制出来的元素无法触发点击事件。使用vueSeamless组件。2，状态没有立刻回显。
vue-seamless-scroll无法实现滚动
luoqiao26的博客
06-05 603
不能用固定的ul和li，需要用v-for列表循环，且在中必须传值，最关键的一步就是:data="items"使用vue-seamless-scroll不能滚动的经验。
vue-seamless-scroll列表循环滚动插件
Lval的博客
11-26 3740
安装 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-seamless-scroll 无线列表滚动卡顿问题
qq_42396813的博客
12-22 1759
vue-seamless-scroll 无线列表滚动卡顿问题
Vue第 36 篇，Vue无缝滚动效果，vue-seamless-scroll插件使用详细（ vue-seamless-scroll 无缝滚动）
热门推荐
weixin_65793170的博客
03-07 3万+
⭐vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，基本能满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下，使用详细；1、安装相关依赖；2、全局引入组件；或则局部引入；3、组件使用，配置相关属性；
vue2中使用vue-seamless-scroll时出现数据重复或者样式错乱问题
amoureux555的博客
03-19 1449
vue2中使用vue-seamless-scroll时出现数据重复或者样式错乱问题，前端使用vue-seamless-scroll出现数据重复或者样式错乱问题，部分没样式，上下样式不一样
vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决
weixin_46995731的博客
09-28 4503
最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问题的解决方法记录一下.思路:在外边写个弹框,在组件上挂上,mouseover,mouseout事件,通过鼠标事件控制弹框的显隐,代码在上边大家可以去看看.开始的思路是在表格行上添加@click事件就行了,这种方式不可行,发现有的行点击事件挂载不上,后来看了看,明白了大概原因,
vue vue-seamless-scroll横向滚动多行问题
最新发布
09-24
Vue Seamless Scroll是一个用于Vue.js的应用组件，它提供了无缝滚动功能，使得列表在水平方向上可以平滑滚动，即使内容超过屏幕宽度也能保持连续。如果你想要解决Vue项目中多行横向滚动的问题，你可以按照以下步骤操作： 1. 安装并引入插件：首先，在你的Vue项目中安装`vue-seamless-scroll`，通过npm或yarn运行相应的命令： ```sh npm install vue-seamless-scroll // 或者 yarn add vue-seamless-scroll ``` 2. 在模板中使用组件：在需要应用无缝滚动的地方，添加`vue-seamless-scroll`组件，并配置属性如总宽度、滚动条样式等： ```html <template> <vue-seamless-scroller :width="totalWidth" @scroll="onScroll"> <!-- 你的列表内容 --> <div v-for="(item, index) in items" :key="index"> <p>{{ item }}</p> </div> </vue-seamless-scroller> </template> <script> export default { data() { return { items: ..., // 你的数据数组 totalWidth: 'auto', // 设置总宽度，可能是动态计算的 }; }, methods: { onScroll(e) { ... } // 可能需要处理滚动事件 } } </script> ``` 3. 根据内容动态调整宽度：如果内容是多行，确保在计算`totalWidth`时考虑到每一行的内容宽度以及必要的边距和滚动空间。 4. 考虑CSS样式：调整列表元素（例如`<div>`）的宽度、内边距和行高，使其适应无缝滚动的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值