better-scroll

解决移动端，支持 PC，各种滚动场景需求的插件，
API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化
https://github.com/ustbhuangyi/better-scroll

better-scroll在线demo https://better-scroll.github.io/examples
https://blog.csdn.net/weixin_43623017/article/details/100897330
https://www.cnblogs.com/ypSharing/p/betterScroll.html

better-scroll用法

pnpm add better-scroll -S  # 安装带有所有插件的 BetterScroll
pnpm add @better-scroll/core # 核心滚动

组件中使用

import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})

better-scroll不能滚动

better-scroll的滚动原理：

1. dom结构至少需要2层
2. 外层容器需要有固定的大小（宽度或高度），作为视口；
3. 内层容器的大小是由内容撑开的，当内层高度或宽度超过外层视口的时候，才会产生滚动。

所以首先需要检查内外层的尺寸
其次是在Vue.js里，我们改变数据，dom并不会立刻改变，
通常会在下一个Event Loop，通常我们说的nextTick去更新。而我们的better-scroll是依赖dom的。
所以，当数据变化映射的dom和better-scroll相关的时候，
我们通常需要在vm.$nextTick的回调函数里初始化或者刷新better-scroll