BetterScroll 是什么
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。
基本使用
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>
import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
movable: true,
zoom: true
})
上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。不过对于 BetterScroll v2.0.4 版本,可以通过 specifiedIndexAsContent 配置项来指定 content,详细的请参考文档。
npm install better-scroll -S # 安装带有所有插件的 BetterScroll
npm install better-scroll -S # 安装带有所有插件的 BetterScroll
<script src="./better-scroll.js"></script>
<script>
console.log(BetterScroll);
const betterScroll = new BetterScroll.createBScroll(document.querySelector(".content"));
console.log(betterScroll);
</script>
<script>
console.log(BetterScroll);
const betterScroll = new BetterScroll.createBScroll(document.querySelector(".content"), {
probeType: 2, /*是否需要实时侦测 0/1 不侦测,2侦测--手指滑动的过程中侦测,一但手指离开,就不侦测。惯性不会被侦测 ,3只要是滚动都 侦测*/
pullUpload: true/*上拉加载更多*/
});
betterScroll.on("事件", function () {
})
</script>