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>

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

  BScroll.use(Pullup)

  export default {
    data() {
      return {
        isPullUpLoad: false,
        data: 30
      }
    },
    mounted() {
      this.initBscroll()
    },
    methods: {
      initBscroll() {
        this.bscroll = new BScroll(this.$refs.scroll, {
          pullUpLoad: true
        })

        this.bscroll.on('pullingUp', this.pullingUpHandler)
      },
      async pullingUpHandler() {
        this.isPullUpLoad = true

        await this.requestData()

        this.bscroll.finishPullUp()
        this.bscroll.refresh()
        this.isPullUpLoad = false
      },
      async requestData() {
        try {
          const newData = await this.ajaxGet(/* url */)
          this.data += newData
        } catch (err) {
          // handle err
          console.log(err)
        }
      },
      ajaxGet(/* url */) {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(20)
          }, 1000)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.pullup
  height: 100%
  .pullup-wrapper
    height: 100%
    padding: 0 10px
    border: 1px solid #ccc
    overflow: hidden
  .pullup-list
    padding: 0
  .pullup-list-item
    padding: 10px 0
    list-style: none
    border-bottom: 1px solid #ccc
  .pullup-tips
    padding: 20px
    text-align: center
    color: #999
</style>

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 事件的消费机会。