pullup

Introduction

The pullup plugin provides BetterScroll with the ability to monitor pulldown operation.

Install

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

// or

yarn add @better-scroll/pull-up

Usage

First, install the plugin via the static method BScroll.use()

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

  BScroll.use(PullUp)

pass in the correct configuration in options, for example:

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

Demo

<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 Options

threshold

• Type: number
• Default: 0

The threshold for triggering a pullingUp hook.

TIP

When pullUpLoad is configured as true, the plugin uses the default plugin option.

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

// equals

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

Instance Methods

TIP

All methods are proxied to BetterScroll instance, for example:

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()

• Details: Finish the pullUpLoad behavior.

WARNING

Every time you trigger the pullingUp hook, you should actively call finishPullUp() to tell BetterScroll to be ready for the next pullingUp hook.

openPullUp(config: PullUpLoadOptions = {})

• Details: Turn on the pullUpLoad dynamically.

• Arguments:

  • { PullDownRefreshOptions } config: Modify the option of the pullup plugin
  • PullDownRefreshOptions:

  export type PullUpLoadOptions = Partial<PullUpLoadConfig> | true
  
  export interface PullUpLoadConfig {
    threshold: number
  }
  

WARNING

The openPullUp method should be used with closePullUp, because in the process of generating the pullup plugin, the pullUpLoad action has been automatically monitored.

closePullUp()

• Details: Turn off pullUpLoad dynamically.

autoPullUpLoad()

• Details：Auto pullUp.

Events

pullingUp

• Arguments: None
• Trigger: When the distance to the bottom is less than the value of threshold, a pullingUp event is triggered.

When threshold is a positive number, it means pullingUp is triggered when the threshold pixel is away from the scroll boundary. On the contrary, it means that the event will be triggered when it crosses the scroll boundary.

Note

After the pullUpLoad action is detected, the consumption opportunity of the pullingUp event is only once, so you need to call finishPullUp() to tell BetterScroll to provide the next consumption opportunity of the pullingUp event.