BetterScroll 是一款重点解决移动端各种滚动场景需求的插件,适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。目前已兼容 PC 端,但似乎还有点小问题。该插件是借鉴 iscroll 发展而来, API 基本兼容 iscroll。值得注意的是 BetterScroll 是使用纯 JavaScript 实现的,所以你可以原生使用它,也可以与一些流行的 MVVM 框架结合使用,比如官方示例中用到的 Vue。
插件安装
BetterScroll 已经更新到 2.0.6 版本了,新版本为了解耦 BetterScroll 1.x 的各个 feature 的功能,防止 bundle 体积无限制的增加,采用了插件化 的架构设计。所以新版本的安装使用就变成了这个样式:
全部安装
npm 方式安装
script 标签引入
按需安装
npm 方式安装
核心部分安装
插件部分安装
script 标签引入
注意:.wrapper 为外层包裹的 div 类名,内部滚动部分的高度应高于 wrapper 的高度,否则不滚动!
当前 BetterScroll 自带的插件有:
- mouse-wheel:扩展 BetterScroll 鼠标滚轮的能力,目前支持鼠标滚轮有:core、slide、wheel、pullup、pulldown。
- observe-dom:开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。
- pulldown:为 BetterScroll 扩展下拉刷新的能力。
- pullup:为 BetterScroll 扩展上拉加载的能力。
- scrollbar:为 BetterScroll 提供了样式美观的滚动条,当滚动停止的时候,滚动条渐隐。
- slide:为 BetterScroll 扩展了轮播焦点图的能力。
- wheel:为 BetterScroll 提供了实现类似 IOS Picker 组件的能力,注意:只是实现 Picker 效果的 JS 逻辑部分, DOM 模版需要用户去实现。
- zoom:为 BetterScroll 提供缩放功能。
- nested-scroll:协调 BetterScroll 双层嵌套的滚动行为,目前只解决了双层嵌套问题,比如竖向套竖向、横向套横向。
- infinity:为 BetterScroll 提供了无限滚动的能力。如果有大量的列表数据需要渲染,可以使用 infinity 插件,此时 BetterScroll 只会渲染一定数量的 DOM 元素,从而使页面在大量数据时依然保持流畅滚动,数据量小则使用 core 即可。
- movable:为 BetterScroll 拓展可移动拖拽的能力。
上述插件功能不能满足你的要求的话,可自行开发一些插件。
相关文档
- GitHub地址:https://github.com/ustbhuangyi/better-scroll
- 使用教程:https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md
- 插件文档:https://better-scroll.github.io/docs/zh-CN/plugins/
从来不会生气的人,注定终生遭受欺凌和压制,直至被摧毁和消灭。