【2020最新】关于better-scroll插件无法滚动的问题解决方法

最新推荐文章于 2024-01-10 23:28:34 发布
最新推荐文章于 2024-01-10 23:28:34 发布
阅读量564 收藏 2
点赞数
分类专栏： 前端 vue 文章标签： npm vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenbi666/article/details/112849181
版权

第一次用Vue做项目，遇到了不少bug，其中用到了better-scroll这个页面滚动插件，结果在用谷歌浏览器的手机模式进行调试发现页面无法滚动，切换成pc模式也不行，再切换回来就可以正常滚动，按照网上的一些方法改动也不行，加延时、加nextclick、切换生命周期钩子等，全部无效，按照网上一些教程看检查插件的输出竟然还没有发现wrapperHeight这个参数！纠结了好几天，本来想放弃治疗，今天决定做殊死一搏，把自己的better-scroll版本换了，查到自己的版本是2.x的，换成了1.8.1。

大家在自己的终端内输入下图指令就可以进行安装
命令行

结果正常，bug解除！！
大家也可以试一下切换版本，有些时候可能真的就是因为版本问题！

还是不懂的可以在下方评论区联系，我看到会回的。

粉笔会在C站不定时发布bug解决贴，欢迎大家关注+点赞哦

fenbi666
关注
专栏目录
解决Vue项目中使用better-scroll无法正常滚动
奶油糖霜的博客
07-30 654
问题描述： 最近在写Vue项目中，由于是移动端开发。为了改善原生滑动在移动端的流畅性问题，于是用了一个小工具better-scroll。但在Vue项目中封装scroll模块时，发现并不能正常滚动（无法滑动）。 import BScroll from 'better-scroll' export default { data() { return { scroll: null } }, mounted() { this.scroll = new BScroll(
vue使用Better-Scroll无法拖动
Bernie_7的博客
04-15 549
vue使用Better-Scroll无法拖动 学习vue的时候，写移动端的页面，使用Better-Scroll的时候因为办法引发的惨案！ 我使用的是2.x的版本，然而学习的时候是1.x的版本，我并不知道，写完发现无法滚动了。 百度了，有人说是子组件的高度大于父组件的高度。 于是，我查看了高度，确实如此，于是限定了高度。发现还是不行。 然后继续百度。。。基本试遍了所有的方法。 最后问了道友，他问我是不是2的版本，我说应该是吧，我命令行安装的，都是最新的版本。然后给我一个图，让我把这个加上。在此我就放他的图了
彻底解决使用better-scroll页面不能滚动的问题
jiaohuizhuang6019的博客
11-01 1520
彻底解决使用better-scroll页面不能滚动的问题
better-scroll 滚动插件better-scroll无法滚动
u013017173的博客
02-19 393
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 项目中遇到了BScroll是使用了 better-scroll 插件。 遇到问题： 内容无法滚动 问题原因： 排查语法写的没问题，问题出在获取dom right-header-table 。 项目中存在多个重名right-header-table
Better Scroll不能滚动问题
kayir的博客
07-30 642
最近在学Vue框架，在初始化Better Scroll插件时遇到了内容不能滚动的问题。 于是在网上搜了几下大概了解到Better Scroll只有在内容高度大于容器高度时滚动。Better Scroll的容器里内容如果是ajax异步获取的，在获取数据之前初始化了Better Scroll就会导致内容高度比容器高度小，从而不会滚动。记录一下两种解决办法。 1.我们只需用watch监听获取的数据，然后里面运行一下this.scroll.refresh()就能解决。 mounted () { this.scro
详解 vue better-scroll滚动插件排坑
08-28
BetterScroll 是一款移动端滚动插件，它的强大之处是解决移动端（已支持 PC）各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 iScroll，在 iScroll 的基础上又扩展了...
vue better-scroll插件使用详解
08-28
vue better-scroll插件使用详解 本篇文章主要介绍了vue better-scroll插件的使用详解，...better-scroll插件是一个功能强大且灵活的移动端滚动解决方案，它可以与Vue框架集成使用，解决滚动问题，并且具有强大的功能。
Angular中使用better-scroll插件的方法
08-27
Angular中使用better-scroll插件的方法 Better-scroll是一个非常流行的滚动插件，Angular框架中使用better-scroll插件可以实现非常流畅的滚动体验。下面将详细介绍Angular中使用better-scroll插件的方法。 首先，...
vue better scroll 无法滚动的解决方法
08-27
Vue Better Scroll 无法滚动的解决方法 Better Scroll 是一个移动端滚动插件，可以实现轮播图和页面滚动。在 Vue 项目中使用 Better Scroll 时，可能会遇到无法滚动的问题。本文将详细介绍 Vue Better Scroll 无法...
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
vue 关于BetterScroll不能滑动问题
weixin_44642057的博客
10-24 1618
在我们的开发中，用vue开发移动端时，如果使用原生滚动的话，在模拟器上面不会出现什么问题，但到了真机上面就会出现滑动不流畅的问题。那么我们可以使用滑动插件来解决这个问题，下面我们来说一下betterscroll这个滑动插件 betterscroll是目前比较好用的一个滑动插件，但是第一次使用的时候总会出现一些问题，使得betterscroll无法达到预期的使用效果，下面就来说一下我觉得会出现的问题 1.页面不能滚动，但可以使用原生滚动 出现这个问题的原因可能是没有设置固定的滚动区域高度 &lt
Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
weixin_47339511的博客
03-10 2837
不得不说better-scroll是个很好用的第三方框架，但是使用恰当才能发挥它强大的功能哦！具体使用步骤请移步→better-scroll链接Github 但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况 具体问题： 1.使用的时候为什么滚动不起作用 首先在在你引入better-scroll成功之后，你的html结构应该如下： <div ref="wrapper" class="wrapper"> <div class="content"></di
解决Vue滑动插件Better-Scroll，卡顿，划不动的bug
weixin_45020094的博客
06-16 3550
bug原因： 因为Better-Scroll插件需要计算滑动的高度，如果页面图片较多，图片没有加载完成，滑动高度就已经计算出来，这个数据偏小，网速较快不会出现这个bu 解决方法： 每个图片加载完毕后，都让他重新计算滑动高度，最后算出来的高度就正确了 代码 使用 @load监听img标签 这样每次图片加载完毕，就会调用这个方法 <img :src="goodsItem.show.img" alt="" @load="imageLoad"> 获取到better-scroll的组件，
在vue中封装一个betterscroll组件，并解决ios、Android在微信页面上下拉出现滑动的问题
前端李小白的博客
03-31 2985
最近在开发微信公众号网页的时候，发现使用原生滚动的时候，ios在微信网页下，上拉，下拉都会出现一大片的空白，看起来极其的别扭，为了解决这一问题，找了许多参考资料，如下是解决方法。 1.首先在你需要禁止滑动的页面中添加如下代码 mounted（）{ document.body.addEventListener( 'touchmove', function (e)...
【vue】mobile端上拉加载不流畅，出现回弹且滑动不流畅卡顿的情况
TwInkle
05-08 644
1、mobile端上拉加载不流畅，出现回弹且滑动不流畅卡顿的情况。 问题原因：下拉将请求的数据追加到数组的后面，由于数据加载是异步的，在生成内容的时候Better-scroll会去自动计算一个高度，但是计算的时候可能还未加载完成数据，就会造成自动计算的高度与实际内容的高度不匹配的情况，就会出现无法滚动的问题。 解决办法：在要展示的数据追加完成后，执行better-scroll实例的刷新方法refresh()； // this.scroll = new BScroll(this.$refs.wrapper,
better-scroll无法滚动问题
XiaoHuangDiLHD的博客
09-26 1132
  无法滚动的时候打印一下scroll对象，看看里面的wrapperHeight是否小于scrollerHeight，如果不小于是不能滚动的，因为hasVerticalScroll表示是否有垂直滚动，如果不小于，那么hasVerticalScroll就是false，所以无法滚动。class为recommend的元素是scroll元素的父元素，它要固定高度为wrapperHeight的高度，如果没...
解决Better Scroll滚动条不能点击元素事件失效问题
sensendedede的博客
01-10 581
用BetterScroll做文章列表滚动容器会发生文章里的文字选中不可用，文章上的事件点击等等被禁用等问题。
(2021通过插件解决)better-scroll插件的无法滑动bug
王光迪的CSDN
02-27 4127
2021-2-27日，这是一篇绝对可以解决问题的文章
关于better-scroll 小问题
wcq_work1995的博客
05-31 5706
今天在用黄毅老师的better-scorll插件的时候碰到一个小问题，发现页面无法上下滚动，我花了一点时间去翻阅了api和审查绑定元素，发现代码应该没问题，然后我在控制台输出了绑定的scroll对象 眼睛直接扫到了hasVerticalScroll这个key，哈哈，这不是‘是否有垂直滚动’的键吗，于是我在浏览器端直接将‘false’改成了‘true’，果然可以直接滚动，但是只能拖拽（因为高度不
better-scroll无法滚动
最新发布
01-13
以下是一个示例代码，演示了如何解决better-scroll无法滚动的问题： ```javascript import BScroll from "@better-scroll/core"; import myPullUp from "@better-scroll/pull-up"; BScroll.use(myPullUp); this....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值