pulldown

介绍

pulldown 插件为 BetterScroll 提供了监测下拉动作的能力。当成功监测到一次下拉动作时,会触发 pullingDown 钩子。通常用于实现列表/页面顶部下拉后加载更多数据的交互。

安装

npm install @better-scroll/pull-down@next --save

// or

yarn add @better-scroll/pull-down@next

使用

首先引入 pulldown 插件,并通过静态方法 BScroll.use() 初始化插件

import BScroll from '@better-scroll/core'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullDown)

然后,实例化 BetterScroll 时需要传入 pulldown 相关配置项 pullDownRefresh:

new BScroll('.bs-wrap', {
  scrollY: true,
  pullDownRefresh: true
})

示例

Pull Down and refresh
Loading...
Refresh success
  • I am item 11
  • I am item 18
  • I am item 3
  • I am item 14
  • I am item 16
  • I am item 22
  • I am item 19
  • I am item 12
  • I am item 0
  • I am item 28
  • I am item 25
  • I am item 1
  • I am item 7
  • I am item 2
  • I am item 17
  • I am item 21
  • I am item 10
  • I am item 5
  • I am item 6
  • I am item 20
  • I am item 23
  • I am item 13
  • I am item 27
  • I am item 29
  • I am item 24
  • I am item 15
  • I am item 8
  • I am item 9
  • I am item 4
  • I am item 26

配置项 pullDownRefresh

默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启下拉刷新。当配置项为一个 Object 时,有如下属性:

名称 类型 描述 默认值
threshold number 配置顶部下拉的距离来决定刷新时机 90
stop number 回弹停留的距离 40

方法

finishPullDown()

  • 介绍:标识一次下拉动作结束。
  • 参数:无
  • 返回值:无

注意:每次触发下拉事件后,在回调函数的最后,都应该调用 finishPullDown() 方法。在 finishPullDown() 方法调用前不会触发下一次的 pullingDown 事件。

openPullDown(config: pullDownRefreshOptions = true)

  • 介绍:开启下拉刷新功能。如果实例化 BetterScroll 时 pullDownRefresh 配置项不为 false,则不需要调用该方法。
  • 参数config: boolean | { threshold: number, stop: number } ,参数为 pullDownRefresh 配置项。默认值为 false。
  • 返回值:无

closePullDown()

  • 介绍:关闭下拉刷新功能。
  • 参数:无
  • 返回值:无

autoPullDownRefresh()

  • 介绍:自动执行下拉刷新。
  • 参数:无
  • 返回值:无

钩子

pullingDown

  • 参数:无
  • 触发时机:当顶部下拉的距离大于 threshold 值时,触发一次 pullingDown 钩子。