Better-Scroll2.0的用法注意事项

1.如果项目需要用到 BetterScroll 的全部插件能力，引用全部的 BetterScroll 可能对你的 bundle 体积有很大的冲击，而且随着 BetterScroll 的功能扩展，体积会无限制的增加

 import BScroll from 'better-scroll'

安装方式：npm install better-scroll --save 

2.但是，BetterScroll2.0开始可以按需加载插件但是，如果只想实现基本功能，就只需要装

 （1）

import BScroll from "@better-scroll/core";

（2） 其他的附加功能就额外安装，例如上拉加载，下拉更新这些

import PullDown from "@better-scroll/pull-down";
import PullUp from '@better-scroll/pull-up';
BScroll.use(PullDown);
BScroll.use(PullUp);

（3）而对于图片加载不出来，可以再添加一个插件

import ObserveDom from "@better-scroll/observe-dom"
BScroll.use(ObserveDom)
//然后需要在BScroll实例中添加一个新的属性
observeDOM: true

 以下是”为什么我的 BetterScroll 滑动不了？“的问题的官方文档的解释

问题基本上出在于高度的计算错误。首先，你必须对 BetterScroll 的滚动原理有一个清晰的认识，对于竖向滚动，简单的来说就是 wrapper 容器的高度大于 content 内容的高度，修改 translateY 来达到滚动的目的，横向滚动的原理类似。那么计算可滚动的高度就是 BetterScroll 必备的逻辑。一般这个逻辑出错的场景在于：

1. 存在不确定尺寸的图片

   • 原因

     bs 执行计算可滚动高度的时候，图片还未渲染完成，也无法监听到图片的加载。有时候甚至配置 observeDOM 为 true 也没效果。

   • 解决

     在图片的 onload 的回调函数里面调用 bs.refresh() 来确保得到正确的图片高度之后再计算可滚动的高度。

     TIP

     observeDOM 为 true 的时候，BetterScroll 首先通过 MutationObserver (opens new window)来监视对 DOM Tree 的改变，但是无法监听图片是否加载完成，所以需要手动调用 refresh() 来计算高度。

     如果当前浏览器不支持 MutationObserver，会降级用 setTimeout 每隔 1s 来重复计算可滚动的高度，这样又能保证在图片加载完成之后，可滚动的高度计算正确。