关于better-scroll插件的无法滑动bug
better-scroll滚动原理
wrapper作为父容器,它的高度会随着内容的大小而撑高。那么,当
content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了
BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略
所以也给定了如下页面结构
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>
所以我们在这里只说最重要的一点!!!
因为
图片
需要加载
,所以better-scroll
的初始化时机
非常重要,因为它在初始化的时候
,会计算父元素和子元素的高度和宽度,如果图片还没有加载完成
就已经开始初始化,那么计算出的实际高度和你的真实高度就会有大量偏差(网速也会影响。。。)我前几天遇到这个问题
解决办法
第一步下载最新版本并引入
yarn add @better-scroll/core
第二步安装插件:better-scroll/observe-dom
开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性:
针对改变频繁的 CSS 属性,增加 debounce
如果改变发生在 scroll 动画过程中,则不会触发 refresh
yarn add @better-scroll/observe-dom
使用
import BScroll from '@better-scroll/core'
import ObserveDom from "@better-scroll/observe-dom";
BScroll.use(ObserveDom);
new BScroll('.bs-wrapper', {
//...
observeDOM: true // 开启 observe-dom 插件
})
在最新版(2.4.1)中使用pullup事件需要安装插件(看个人需求)
yarn add @better-scroll/pull-up
使用
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)
new BScroll('.bs-wrapper', {
pullUpLoad: true
})
这个问题还有很多解决办法,但网上很多文章讲也没有讲清,使用这个插件就好了
别的解决办法大概思路就是:监听图片加载调用refresh()重新计算高度
更多详情可查看官网 : https://better-scroll.github.io/docs/zh-CN/