Better-Scroll 使用指南：从基础滚动到增强功能实现

什么是 Better-Scroll

Better-Scroll 是一个现代化的移动端滚动解决方案，它解决了原生滚动在移动端的诸多痛点，如滚动卡顿、边界回弹效果不佳等问题。该库采用模块化设计，开发者可以根据项目需求灵活选择功能模块，实现最优的性能体验。

基础滚动实现

核心模块引入

对于只需要基本滚动功能的场景，我们可以仅引入核心模块：

import BScroll from '@better-scroll/core'

const bs = new BScroll('.wrapper', {
  scrollX: true,   // 开启横向滚动
  scrollY: true,   // 开启纵向滚动
  click: true,     // 允许点击事件
  tap: true,       // 允许轻触事件
  bounce: {        // 边界回弹效果配置
    top: true,
    bottom: true,
    left: true,
    right: true
  }
})

关键配置解析

1. scrollX/scrollY：控制滚动方向，可根据需求开启横向或纵向滚动
2. click/tap：解决移动端点击事件穿透问题
3. bounce：配置边界回弹效果，可单独控制四个方向

增强型滚动功能

Better-Scroll 采用插件机制扩展功能，开发者可以根据需求引入特定插件。

插件使用示例：上拉加载

import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

// 注册插件
BScroll.use(Pullup)

const bs = new BScroll('.wrapper', {
  probeType: 3,      // 实时派发滚动事件
  pullUpLoad: {      // 上拉加载配置
    threshold: 50    // 距离底部多少像素触发加载
  }
})

// 监听上拉加载事件
bs.on('pullingUp', () => {
  // 加载数据逻辑
  fetchData().then(() => {
    bs.finishPullUp()  // 加载完成后调用
    bs.refresh()       // 刷新滚动区域
  })
})

常用插件介绍

1. pull-up：实现上拉加载更多功能
2. pull-down：实现下拉刷新功能
3. scroll-bar：添加滚动条指示器
4. slide：实现轮播图效果
5. wheel：实现picker选择器效果

全功能版本使用

虽然 Better-Scroll 提供了包含所有插件的完整版本，但出于性能考虑，建议仅在开发原型或小型项目中使用：

import BScroll from 'better-scroll'

const bs = new BScroll('.wrapper', {
  pullUpLoad: true,    // 上拉加载
  pullDownRefresh: true, // 下拉刷新
  scrollbar: {          // 滚动条
    fade: true,         // 淡入淡出效果
    interactive: true   // 可交互
  },
  mouseWheel: {         // 鼠标滚轮支持
    speed: 20,
    invert: false
  }
})

最佳实践建议

1. 按需引入：始终优先考虑使用核心模块+特定插件的组合，而非完整版本
2. 及时销毁：在组件卸载时调用 bs.destroy() 释放资源
3. 数据更新后刷新：内容变化后调用 bs.refresh() 重新计算滚动区域
4. 合理使用 probeType：根据需求选择合适的滚动事件派发频率
5. 性能优化：对于大数据列表，考虑使用虚拟滚动技术

通过合理配置 Better-Scroll，开发者可以轻松实现各种复杂的滚动交互效果，同时保持应用的流畅性能。