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, //关闭竖向滚动
})
}