（已解决）better-scroll区域可以左右滚动 但手指触摸页面不能上下滑动

最新推荐文章于 2023-05-22 17:41:11 发布
最新推荐文章于 2023-05-22 17:41:11 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49293345/article/details/109851806
版权

在页面写了一个左右滑动功能，左右滑动没问题，但是发现在移动端，触摸该区域上下滑动页面就出问题了，页面上下滑不动了。。。。

better-scroll区域可以左右滚动（我做的是横向滚动）

但手指触摸不能上下滑动页面，应该怎么解决呢？
配置项

加入 eventPassthrough: ‘vertical’ 解决了。

new BScroll(this.refs.activelistWrapper, {
      scrollX: true,
      eventPassthrough: 'vertical'
    })

配置显示滚动条

scrollbar: {
 fade: false, // true滚动时显示，false一直显示
 interactive: false // 1.8.0 新增互动
},
小小小少年_
关注
专栏目录
vue 关于BetterScroll不能滑动问题
weixin_44642057的博客
10-24 1586
在我们的开发中，用vue开发移动端时，如果使用原生滚动的话，在模拟器上面不会出现什么问题，但到了真机上面就会出现滑动不流畅的问题。那么我们可以使用滑动插件来解决这个问题，下面我们来说一下betterscroll这个滑动插件 betterscroll是目前比较好用的一个滑动插件，但是第一次使用的时候总会出现一些问题，使得betterscroll无法达到预期的使用效果，下面就来说一下我觉得会出现的问题 1.页面不能滚动，但可以使用原生滚动 出现这个问题的原因可能是没有设置固定的滚动区域高度 &lt
解决Vue项目中使用better-scroll在下拉加载页面后出现滑动卡顿问题
奶油糖霜的博客
07-31 1891
项目场景： 在vue项目中使用better-scroll解决原生滑动不够顺滑的问题，但在下拉加载更多数据时，出现无法下拉，滑动卡顿，但是稍微等一会，就又可以正常下拉滑动 原因分析： 出现该现象的原因是由于better-scroll中的一个属性：scrollerHeight better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的 scrollerHeight属性是根据放在better-scroll中子组件的高度决定的 但在刚下拉加载时，由于图片加载速度较慢，所以
解决 better-scroll插件使用过程中无法滑动bug（原创，禁止转载）
zqy123456789000的博客
11-22 1669
解决 better-scroll插件使用过程中无法滑动bug 1：首先我们要知道 better-scroll 实现的原理 条件 必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div，包裹整个可以滚动的部分 内层div(content)高度一定大于外层div(wrapper)的宽或高，才能滚动 翻译：Warpper（包装，包装器) content(内容) 顾名思义，Wrapper 就是外层的盒子，content 就是你需要滑动区域里的内容 也就是，你想要使
better-scroll 滚动BUG，某些时候设置scrollY后，只能上滑不能下滑，例如某些组件设置了其他挂载节点的时候，不能下滑。
qq_42386231的博客
06-23 417
说明：作用：move 事件通常会绑定到 document 上而不是滚动的容器上，当移动的过程中光标或手指离开滚动的容器滚动仍然会继续，这通常是期望的。当然你也可以把 move 事件绑定到滚动的容器上，bindToWrapper 设置为 true 即可，这样一旦移动的过程中光标或手指离开滚动的容器，滚动会立刻停止。解决办法：使用 :stop-propagation=“false” 阻止轮播图滑动事件冒泡，使轮播图只执行better-scroll派发的点击事件。例如某些组件设置了其他挂载节点的时候，不能下滑。
Better-Scroll代码正确却无法滑动的小bug解决方案
Heby的博客
07-01 650
better-scroll插件大多数用于移动端上拉加载更多和下拉更新，根据官网说明时需要两个div框，来使用scroll。但是Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定，scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度，这样就会面临一个很尴尬的问题，因为我们的数据是调取来的，并没有固定的值，并且在执行上拉加载更多时候，高度更是无法估量，因此会造成超出高度部分无法滑动的。以下是我面临该问题...
vue 中使用better-scroll插件时无法滚动问题
QMM的专栏
08-30 6416
1. 检查HTML 以及css是否有写错的地方，有时候写错会导致html中dom无法正确生成，而better-scroll是需要dom完全加载完毕后才可以正确滚动的 2. html和css全部写正确的时候还是无法滚动     检查better-scroll是否初始化时机太早（dom没有完全生成，已经初始化了），可以使用vue的$nextTick来异步初始化better-scroll 3. b
详解 vue better-scroll滚动插件排坑
11-27
BetterScroll 通过监听用户的触摸事件，计算内容区域（content）与容器（wrapper）之间的相对位置，进而实现流畅的滚动效果。内容区域的高度超过容器时，便可以实现滚动；如果内容区域的高度小于或等于容器，滚动则...
在vue中封装betterscroll+解决betterscroll封装使用后在浏览器可以滚动但发布到手机上却不能滚动的问题
yuyang_z的博客
07-26 2247
如果对于betterscroll插件还不了解的可以参考BetterScroll：可能是目前最好用的移动端滚动插件 在vue中使用betterscroll、betterscroll的滚动原理以及scroll组件的封装可参考当 better-scroll 遇见 Vue 目录 一、在vue中封装betterscroll 1、创建一个scroll.vue 2、在父组件中使用scroll 二、出...
当vue遇见better-scroll所遇到的坑
丑小鸭变黑天鹅的博客
05-25 552
当vue遇见better-scroll所遇到的坑一、问题描述二、解决办法三、官网描述 一、问题描述 初次加载可以滑动，刷新之后不能滑动了 在学习vue的过程中，从网上找了一个案例去练习，视频中老师用到了better-scroll，然后跟着一模一样的敲，但是总是不能如愿以偿，初次加载可以正常只用滑动，一旦页面发送刷新，则鼠标滚动就失效了。找了很久解决办法，但是也没能解决。 从网上找过的办法，给出其中普遍给出的解决办法 1、给外面加上this.$nextTick(),并没能解决问题 //解决： this.$ne
[vue2-better-scroll基本配置项
weixin_45066195的博客
04-06 345
vue2-better-scroll基本配置项 // An highlighted block <vue-better-scroll ref="scroll" swipe-time="1500" bounce-time="bounceTime" :listenScroll="true" :start-y="parseInt(distanceScroll)" :pull-down-refresh="pullDownRefreshObj" :pull-up
vue better scroll 无法滚动的解决方法
08-27
better scroll可以实现轮播图和页面滚动，是移动端滚动插件，这篇文章主要介绍了vue better scroll 无法滚动的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
better-scroll无法滚动的问题
OHRadiance的专栏
11-11 1万+
总结一下目前为止碰到的better-scroll无法滚动的问题。 遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。 一是层级关系出错，二是计算高度出错。1，层级关系BS的基本结构是：一个wrapper曾，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。<div class="wrapper"> <div
better-scroll滚动不了的问题
Seety_ST的专栏
09-08 7546
今天有空尝试用了better-scroll组件来写slider，谁知道遇到一个很坑的一个东西。1、一定要每个slider-item元素添加一个宽度，重点是父元素slider-group的宽度也一定要大于等于所有子元素slider-item之和。2、一定要保证在DOM渲染完毕后初始化better-scroll，也就是添加延时执行，setTimeout(() => { this._in
Better-Scroll内容无法下拉的Bug原因之一
u013500603的博客
07-20 548
#Better-Scorll# 系列文章 文章目录一、Better-Scroll是什么？二、1.Better-Scorll内容无法下拉的Bug原因之一2.解决办法 一、Better-Scroll是什么？ better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 二、 1.Better-Scorll内容无法下拉的Bug原因之一 代码如下
使用better-scroll时滑不动？看看是不是这个问题
纸月四的博客
12-11 879
首先看wrapperHeight的高度和内容的高度是什么？ 要满足 内容高度大于容器高度。 hasVerticalScroll为true。 scrollerHeight的高度要等于 wrapperHeight-contentHeight。 一般是没有设置容器的高度或这内容高度不够。 如果 内容高度大于容器高度，但是 hasVerticalScroll为false。 scrollerHeight高度等于了wrapperHeight的高度。 如果数据是异步获取的，这时应该把数据传给 scroll组件，
vue3中使用better-scroll出现无法滑动看不到更多数据的问题
最新发布
qq_41027095的博客
05-22 1004
比如，上拉加载一次数据后，数据被加入到了数据列表，这导致v-for遍历生成的DOM更多，高度也就变高了，这是就需要调用refresh()。如果你的数据列表是用ref声明的响应式数据，则像下面的代码那样即可；如果你的数据列表是用reactive的数据模型中的属性，则在watch中，要写成getter函数的方式。在 vue 中数据发生变化后，dom 的更新是需要一定时间的，而我们在数据更新之后就立即去操作或者获取 dom 的话，其实还是操作和获取的未更新的 dom ，而我们可以调用。nextTick 的作用。
html页面，手机模拟器不能滑动，但是鼠标能滚动
热门推荐
u010833605的博客
03-02 2万+
今天遇到一个很悲催的事情，就是发现，写的h5页面在chrome手机模拟器下竟然不能滑动，主要有一个根本不能滚！还有几个一下能滚，一下不能滚，然后我就傻逼了。悲催归悲催，问题总归要解决的，请教了一个年长的前端，他居然说肯定是我的CSS样式有问题，然后我就开始检查我的样式，一个一个是过来，发现没有问题啊；走到这里你要是觉得还是没有说服力，那我教你一个办法，直接写上20个p标签，里面加文字，不要任何样式，
mui框架scroll,鼠标滑轮可以滚动，移动端触摸无法滚动
yyanglirong的博客
08-12 879
解决方案如下： let list = document.querySelector('.mui-scroll-wrapper') list.addEventListener('touchmove', e => e.stopPropagation(), false) 需要监听触摸事件，阻止事件冒泡，具体原理不明； 懂的大佬麻烦留言知道一下 ...
better-scorll 横向滚动无效
ActionPig 的 Js
06-16 960
高仿饿了么项目中用到了很多better-scroll插件，基本上都是垂直滚动。 有几个点必须要注意，一个是外部包装器wrapper通过ref="",命名后在创建BScroll实例时作为参数传入并添加其他参数。 this.scroll = new BScroll(this.$refs.yourWrapper,{其他配置参数}); 这里也有两个点需要注意，一个是内部容器只能是独立的div或者其他元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值