关于better-scroll插件的无法滑动bug(2021通过插件解决)
better-scroll滚动原理
wrapper作为父容器,它的高度会随着内容的大小而撑高。那么,当
content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了
BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略
所以也给定了如下页面结构
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div>
所以我们在这里只说最重要的一点!!!
因为
图片需要加载
,所以better-scroll的初始化时机非常重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,如果图片还没有加载完成就已经开始初始化,那么计算出的实际高度和你的真实高度就会有大量偏差(网速也会影响。。。)
这是目前所有使用者会出现无法滚动的最大原因
我前几天遇到这个问题,并且better-scroll文档无法访问,github上的文档只有大概使用,找解决方法找了整整一天,网上的各种方法层出不穷,最优解:
通过插件:better-scroll/observe-dom
动态计算 BetterScroll 的可滚动高度或者宽度,你并不需要自己在高度或者宽度发生变化的时候,手动调用 refresh() 方法。插件通过 MutationObserver 帮你完成了。
如果当前你的浏览器不支持 MutationObserver,会降级使用 setTimeout。
使用
安装依赖 npm install @better-scroll/observe-dom
import BScroll from '@better-scroll/core' import ObserveDom from '@better-scroll/observe-dom' BScroll.use(ObserveDom) const bs = new BScroll('.wrapper', { observeDOM: true })
这个问题还有很多解决办法,但网上很多文章讲也没有讲清,使用这个插件就好了
别的解决办法大概思路就是:监听图片加载调用refresh()重新计算高度
vue用img标签,用
@load="定义一个方法"
监听图片加载事件,只要图片加载一个就会调用一次你定义的方法最后在方法中写入this.scroll.refresh()就可以做到加载一个图片刷新一次重新计算高度,同时你需要使用防抖函数避免频繁的重复调用带来的各种问题
到此这篇关于(2021通过插件解决)better-scroll插件的无法滑动bug的文章就介绍到这了,更多相关better-scroll插件无法滑动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:- [ZZ]关于TDD的观点:质量是反复思考的结果,仅靠解决Bug无法获得
- VUEJS滚动插件BetterScroll使用时 无法滚动,但是已经捕获 demo
- 关于CI框架通过修改.htaccess文件的办法解决无法加载资源文件的方法
- HorizontalScrollView中嵌套ViewPager时,ViewPager无法滑动的问题解决方法
- 关于datagrid可编辑表格使用Combobox多选编辑时无法选择、新增时无法保存BUG解决...
- 关于初学者nginx启动 但是无法通过IP地址访问的解决办法!
- 关于ligerUI中ligerTree代码中的一个bug,造成该控件无法通过url的POST方式加载数据
- 【BUG解决】IDLE可以编译,而CMD无法通过
- 关于DNAT后,内网用户无法通过域名访问服务器的解决
- 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法
- vue-awesome-swiper 的使用 以及解决swiper插件处理通过append追加上去的元素,无法添加pagination的问题
- 利用better-scroll插件做移动端table可上下左右滑动且固定表头和列
- vue项目引用better-scroll插件,在最新的ios13.4版本上,滑动到底部或顶部过快,会出现页面回弹
- vue better scroll 无法滚动的解决方法
- 关于myeclipse10.7插件安装sites 添加后无法删除的解决
- 解决 Better-scroll 可滚动区域的bug
- 同ListView该接口无法通过手势滑动左右切换界面问题解决方法
- 关于zepto animate 给div 为position absoulte的设置动画,滑动一下才显示的bug解决
- 关于解决eclipse被墙无法下载一些插件和更新的问题
- 解决Webstorm通过Chrome无法调用JB插件调试的问题