BetterScroll 2.0 使用指南

BetterScroll 2.0 使用指南

better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址:https://gitcode.com/gh_mirrors/be/better-scroll

1. 项目介绍

BetterScroll 是一个专为移动端设计（同时支持PC）的滚动解决方案。它源于 iScroll 实现灵感，但在 API 上保持向下兼容的同时，扩展了许多特色功能并进行了性能优化。此库独立于任何框架，适用于 Vue、React 等MVVM环境，且支持插件化，如 Picker、PullUpLoad、PullDownRefresh、Zoom、Mouse-Wheel、Slide、Movable 和 Indicators 等。

2. 项目快速启动

2.1 安装

确保您已经安装了 Node.js 和 npm。使用以下命令安装 BetterScroll 的核心库：

npm install @better-scroll/core --save
# 或者使用 yarn
yarn add @better-scroll/core

2.2 基本使用

在 HTML 文件中创建一个滚动区域：

<div id="wrapper">
  <!-- 内容区域 -->
</div>

然后在 JavaScript 中初始化 BetterScroll:

import BScroll from '@better-scroll/core'

let wrapper = document.getElementById('wrapper')
let bs = new BScroll(wrapper)

这样你就创建了一个基础的 BetterScroll 实例。不过请注意，只有 content 区域的内容超过 wrapper 的高度时，才能产生滚动效果。如果没有 content 元素，直接在 wrapper 内填充多个 div 也是可以的。

3. 应用案例与最佳实践

一个典型的实践是在 Vue 或其他框架中封装 BetterScroll：

<template>
  <div ref="wrapper">
    <!-- 内容 -->
  </div>
</template>

<script>
import BetterScroll from '@better-scroll/core'
export default {
  mounted() {
    this.$nextTick(() => {
      if (!this.$refs.wrapper) return
      const bs = new BetterScroll(this.$refs.wrapper)
    })
  }
}
</script>

最佳实践包括在数据更新后重新计算内容的高度，例如：

updated() {
  if (this.bs) {
    this.bs.refresh()
  }
},

并且确保在组件销毁时释放资源：

beforeDestroy() {
  if (this.bs) {
    this.bs.destroy()
  }
}

4. 典型生态项目

BetterScroll 生态体系中包含了多种插件，以便扩展其功能。以下是一些常见插件：

• @better-scroll/pull-down-refresh - 下拉刷新功能
• @better-scroll/pull-up-load - 上拉加载更多
• @better-scroll/slide - 列表滑动切换
• @better-scroll/infinite - 无限滚动加载

这些插件的安装和使用方法请参考官方文档。

结语

BetterScroll 提供了一套完善的解决方案，使得在移动端和桌面端实现平滑、高效的滚动变得简单。结合插件系统，你可以构建出满足复杂需求的滚动交互。祝你在使用 BetterScroll 的过程中一切顺利！

更多示例和详细文档

better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址:https://gitcode.com/gh_mirrors/be/better-scroll