better-scroll中文文档
better-scroll中文文档网址: https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md
better-scroll是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化,better-scroll是使用纯 JavaScript 实现的,这意味着它是无依赖的。
一、better-scroll的使用方法:
1.起步
better-scroll最常见的应用场景是列表滚动,我们来看一下它的 html 结构。
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div>
上面的代码中 better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。不过对于 better-scroll v2.0.4 版本,可以通过 specifiedIndexAsContent 配置项来指定 content,详细的请参考文档。
2.最简单的初始化代码如下:
import BScroll from '@better-scroll/core' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper)
二、插件
通过插件,增强 BetterScroll core scroll 的能力,比如:
import BScroll from '@better-scroll/core' import PullUp from '@better-scroll/pull-up' let bs = new BScroll('.wrapper', { pullUpLoad: true })