better-scroll插件[email protected]

关于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/