pullup

介绍

pullup 插件为 BetterScroll 提供了监测上拉动作的能力。当成功监测到一次上拉动作时,会触发 pullingUp 事件。通常用于实现列表/页面滚动到底部时,上拉加载更多数据的功能。

安装

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

// or

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

使用

通过静态方法 BScroll.use() 初始化插件

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

BScroll.use(Pullup)

然后,实例化 BetterScroll 时需要传入 pullup 相关配置项 pullUpLoad

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

示例

  • I am item 1
  • I am item 2
  • I am item 3
  • I am item 4
  • scroll up 👆🏻
  • I am item 6
  • I am item 7
  • I am item 8
  • I am item 9
  • scroll up 👆🏻
  • I am item 11
  • I am item 12
  • I am item 13
  • I am item 14
  • scroll up 👆🏻
  • I am item 16
  • I am item 17
  • I am item 18
  • I am item 19
  • scroll up 👆🏻
  • I am item 21
  • I am item 22
  • I am item 23
  • I am item 24
  • scroll up 👆🏻
  • I am item 26
  • I am item 27
  • I am item 28
  • I am item 29
  • scroll up 👆🏻
Pull up and load more

配置项 pullUpLoad

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

名称 类型 描述 默认值
threshold number 触发上拉事件的阈值 0

方法

finishPullUp()

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

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

openPullUp(config: pullUpLoadOptions = true)

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

closePullUp()

  • 介绍:关闭上拉加载功能。
  • 参数:无
  • 返回值:无

事件

pullingUp

  • 参数:无
  • 触发时机:当距离滚动到底部小于 threshold 值时,触发一次 pullingUp 事件。