# pullup

# 介绍

pullup 插件为 BetterScroll 扩展上拉加载的能力。

# 安装

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

// or

yarn add @better-scroll/pull-up

# 使用

通过静态方法 BScroll.use() 注册插件

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

  BScroll.use(Pullup)

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

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

# 示例

<template>
  <div class="pullup">
    <div ref="scroll" class="pullup-wrapper">
      <div class="pullup-content">
        <ul class="pullup-list">
          <li v-for="i of data" :key="i" class="pullup-list-item">
            {{ i % 5 === 0 ? 'scroll up 👆🏻' : `I am item ${i} `}}
          </li>
        </ul>
        <div class="pullup-tips">
          <div v-if="!isPullUpLoad" class="before-trigger">
            <span class="pullup-txt">Pull up and load more</span>
          </div>
          <div v-else class="after-trigger">
            <span class="pullup-txt">Loading...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

# pullUpLoad 选项对象

# threshold

  • 类型: number

  • 默认值: 0

    触发上拉事件的阈值。

提示

当 pullUpLoad 配置为 true 的时候,插件内部使用的是默认的插件选项对象。

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

// 相当于

const bs = new BScroll('.wrapper', {
  pullUpLoad: {
    threshold: 0
  }
})

# 实例方法

提示

以下方法皆已代理至 BetterScroll 实例,例如:

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

BScroll.use(PullUp)

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

bs.finishPullUp()
bs.openPullUp({})
bs.closePullUp()

# finishPullUp()

  • 介绍:结束上拉加载行为。

注意

每次触发 pullingUp 钩子后,你应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。

# openPullUp(config: PullUpLoadOptions = {})

  • 介绍:动态开启上拉功能。
  • 参数
    • { PullUpLoadOptions } config:修改 pullup 插件的选项对象
    • PullUpLoadOptions:类型如下
    export type PullUpLoadOptions = Partial<PullUpLoadConfig> | true
    
    export interface PullUpLoadConfig {
      threshold: number
    }
    

注意

openPullUp 方法应该配合 closePullUp 一起使用,因为在 pullup 插件的生成过程当中,已经自动监测了上拉加载的动作

# closePullUp()

  • 介绍:关闭上拉加载功能。

# autoPullUpLoad()

  • 介绍:自动执行上拉加载。

# 事件

# pullingUp

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

当 threshold 为正数,代表距离滚动边界 threshold 像素的时候触发 pullingUp,反之,代表越过滚动边界才会触发事件

警告

监测到上拉刷新的动作之后,pullingUp 事件的消费机会只有一次,因此你需要调用 finishPullUp() 来告诉 BetterScroll 来提供下一次 pullingUp 事件的消费机会。