better-scroll 是什么

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，zip 后仅有9kb，是一款非常轻量的 JS lib。

怎么使用 better-scroll

结构

例：常见的列表滚动

以上代码better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。

加载

<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @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', {})

具体的api 教程：https://gitee.com/mirrors/better-scroll/

切记不可以在render里进行实例化因为在第一次触发render的时候DOM还未生成所以需要在componentDidMount里进行。

很多人已经用过 better-scroll，但是最多的问题是：

better-scroll 初始化了， 但是没法滚动。

不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

better-scroll 也是一样的原理，我们可以用一张图更直观的感受一下：

布局

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

首先需要给wrapper设置css

.wrapper{ width: 100%; white-space: nowrap; //让子元素超出不换行 padding: 25px 13px; overflow: hidden; }

content元素需要设置动态的width，可以去估算出每个元素的宽度

<ul className="content" style={{ width: `${210 * _flattenDeep(list).length}px` }} ></ul>

在这里我根据数组元素的length来置换ul的总宽度

然后就可以滚动啦！

当然要是需要竖向滚动需要设置在初始化时

componentDidMount() {
    const wrapper = document.querySelector('.wrapper')
    //选中DOM中定义的 .wrapper 进行初始化
    const scroll = new BScroll(wrapper, {
      click: true,  // better-scroll 默认会阻止浏览器的原生 click 事件
      scrollY: true, //关闭竖向滚动
    })
  }