【JS 插件】better-scroll.js —— 移动端滚动插件[兼容PC]

BetterScroll 是一款重点解决移动端各种滚动场景需求的插件,适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。目前已兼容 PC 端,但似乎还有点小问题。该插件是借鉴 iscroll 发展而来, API 基本兼容 iscroll。值得注意的是 BetterScroll 是使用纯 JavaScript 实现的,所以你可以原生使用它,也可以与一些流行的 MVVM 框架结合使用,比如官方示例中用到的 Vue。

插件安装

BetterScroll 已经更新到 2.0.6 版本了,新版本为了解耦 BetterScroll 1.x 的各个 feature 的功能,防止 bundle 体积无限制的增加,采用了插件化 的架构设计。所以新版本的安装使用就变成了这个样式:

全部安装

npm 方式安装
// 安装
npm install better-scroll -S           # 安装带有所有插件的 BetterScroll
// 导入
import BetterScroll from 'better-scroll'
// 使用
let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})
script 标签引入
// 引入
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
// 压缩后的文件引入
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
// 使用
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

按需安装

npm 方式安装

核心部分安装

// 安装
npm install @better-scroll/core # 核心滚动部分
// 导入
import BScroll from '@better-scroll/core'
// 使用
let bs = new BScroll('.wrapper', {})

插件部分安装

// 安装
npm install @better-scroll/PluginName --save
// 导入
import Plugin from 'somewhere'
BScroll.use(Plugin)
// 使用
new BScroll('.wrapper', {
    pluginKey: {}         // pluginKey 对应 Plugin 类上静态属性 pluginName 的值,否则插件无法实例化
})
script 标签引入
// 引入
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>
// 压缩后的文件引入
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
// 使用
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

注意:.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 拓展可移动拖拽的能力。

上述插件功能不能满足你的要求的话,可自行开发一些插件。

相关文档

十二 8

历史上的今天

未经允许不得转载

文章标题:蝈蝈要安静 » 【JS 插件】better-scroll.js —— 移动端滚动插件[兼容PC]

原文链接:https://blog.quietguoguo.com/4043.html

发布信息:文章由【蝈蝈要安静】于<2020-12-08>发布于【HTML/CSS/JS】分类下

相关标签:||

相关推荐

评论 抢沙发

  • 昵称(必填)
  • 邮箱(必填)
  • QQ(选填)
  • 网址(选填)