Question

为什么要有插件

为了解耦 BetterScroll 1.x 的各个 feature 的功能，防止 bundle 体积无限制的增加。在 2.x 的架构设计当中，采用了『插件化』 的架构设计。对于 1.x 的各个 feature，在 2.x 都将以 Plugin 的形式实现。

已有的插件：

• pulldown
• pullup
• scrollbar
• slide
• wheel
• zoom
• mouse-wheel
• observe-dom
• observe-image
• nested-scroll
• infinity
• movable
• indicators

非常欢迎大家参与插件的贡献，在此之前，你需要花点时间了解这个如何编写插件。

使用插件

通过全局方法 BScroll.use() 使用插件。它需要在你调用 new BScroll() 之前完成：

  import BScroll from '@better-scroll/core'
  import Plugin from 'somewhere'

  BScroll.use(Plugin)
  new BScroll('.wrapper', {
    pluginKey: {} // pluginKey 对应 Plugin 类上静态属性 pluginName 的值，否则插件无法实例化
  })

使用插件的方法和属性

插件中可能会暴露一些方法和属性，这些方法和属性在你执行完 new BScroll() 之后，会通过 Object.defineProperty 的方式代理至 bs。例如，zoom 插件中提供了 zoomTo 方法，你可以通过下面的方式来使用：

  import BScroll from '@better-scroll/core'
  import Zoom from '@better-scroll/zoom'

  BScroll.use(Zoom)

  const bs = new BScroll('#scroll-wrapper', {
    freeScroll: true,
    scrollX: true,
    scrollY: true,
    disableMouse: true,
    useTransition: true,
    zoom: {
      start: 1,
      min: 0.5,
      max: 2
    }
  })

  bs.zoomTo(1.5, 0, 0) // 不用关心 zoom 插件实例，直接通过 bs 获取暴露的属性或者方法。

使用插件的事件

和方法、属性类似，插件中暴露的事件最终也会被代理至 bs。例如，zoom 插件中提供了 zoomStart 事件，你可以通过下面的方式来注册事件侦听器：

  import BScroll from '@better-scroll/core'
  import Zoom from '@better-scroll/zoom'

  BScroll.use(Zoom)

  const bs = new BScroll('#scroll-wrapper', {
    freeScroll: true,
    scrollX: true,
    scrollY: true,
    zoom: {
      start: 1,
      min: 0.5,
      max: 2
    }
  })

  bs.on('zoomStart', zoomStartHandler)
  // so, you can do anything in zoomStartHandler

具备所有插件能力的 BetterScroll

考虑到一个个注册插件比较麻烦，如果你的项目用到 BetterScroll 的全部插件能力，我们提供了一劳永逸的方案。

  import BScroll from 'better-scroll'

  const bs = new BScroll('#scroll-wrapper', {
    pullUpLoad: true,
    pullDownRefresh: true,
    scrollbar: true,
    // 等等
  })

::: warning 注意 引用全部的 BetterScroll 可能对你的 bundle 体积有很大的冲击，而且随着 BetterScroll 的功能扩展，体积会无限制的增加，请按需引入。 :::

::: warning 注意 通常情况下，你应该关注 BetterScroll 实例暴露出来的属性和方法，因为对于插件实例上的属性和方法，都已经代理到 bs 上面，如果你真的需要关心插件实例，你也可以通过 bs.plugins 来获取所有插件的信息。

  import BScroll from '@better-scroll/scroll'
  import zoom from '@better-scroll/zoom'

  BScroll.use(zoom)

  const bs = new BScroll('.wrapper', {
    zoom: true
  })

  console.log(bs.plugins.zoom) // 获取对应插件实例

:::