# pulldown

# 介绍

pulldown 插件为 BetterScroll 扩展下拉刷新的能力。

# 安装

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

// or

yarn add @better-scroll/pull-down

# 使用

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

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

BScroll.use(PullDown)

然后，实例化 BetterScroll 时需要传入 pulldown 配置项。

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

# 示例

<template>
  <div class="pulldown">
    <div
      class="pulldown-bswrapper"
      ref="bsWrapper"
    >
      <div class="pulldown-scroller">
        <div class="pulldown-wrapper">
          <div v-show="beforePullDown">
            <span>Pull Down and refresh</span>
          </div>
          <div v-show="!beforePullDown">
            <div v-show="isPullingDown">
              <span>Loading...</span>
            </div>
            <div v-show="!isPullingDown">
              <span>Refresh success</span>
            </div>
          </div>
        </div>
        <ul class="pulldown-list">
          <li
            :key="i"
            class="pulldown-list-item"
            v-for="i of dataList"
          >{{ `I am item ${i} ` }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

BScroll.use(PullDown)

function generateData() {
  const BASE = 30
  const begin = BASE * STEP
  const end = BASE * (STEP + 1)
  let ret = []
  for (let i = end; i > begin; i--) {
    ret.push(i)
  }
  return ret
}

const TIME_BOUNCE = 800
const TIME_STOP = 600
const REQUEST_TIME = 3000
const THRESHOLD = 70
const STOP = 56
let STEP = 0

export default {
  data() {
    return {
      beforePullDown: true,
      isPullingDown: false,
      dataList: generateData()
    }
  },
  mounted() {
    this.initBscroll()
  },
  methods: {
    initBscroll() {
      this.bscroll = new BScroll(this.$refs.bsWrapper, {
        scrollY: true,
        bounceTime: TIME_BOUNCE,
        pullDownRefresh: {
          threshold: THRESHOLD,
          stop: STOP
        }
      })

      this.bscroll.on('pullingDown', this.pullingDownHandler)
      this.bscroll.on('scroll', this.scrollHandler)
      this.bscroll.on('scrollEnd', e => {
        console.log('scrollEnd')
      })
    },
    scrollHandler(pos) {
      console.log(pos.y)
    },
    async pullingDownHandler() {
      console.log('trigger pullDown')
      this.beforePullDown = false
      this.isPullingDown = true
      STEP += 1

      await this.requestData()

      this.isPullingDown = false
      this.finishPullDown()
    },
    async finishPullDown() {
      const stopTime = TIME_STOP
      await new Promise(resolve => {
        setTimeout(() => {
          this.bscroll.finishPullDown()
          resolve()
        }, stopTime)
      })
      setTimeout(() => {
        this.beforePullDown = true
        this.bscroll.refresh()
      }, TIME_BOUNCE)
    },
    async requestData() {
      try {
        const newData = await this.ajaxGet(/* url */)
        this.dataList = newData.concat(this.dataList)
      } catch (err) {
        // handle err
        console.log(err)
      }
    },
    ajaxGet(/* url */) {
      return new Promise(resolve => {
        setTimeout(() => {
          const dataList = generateData()
          resolve(dataList)
        }, REQUEST_TIME)
      })
    }
  }
}
</script>

# pullDownRefresh 选项对象

# threshold

类型： number
默认值： 90

配置顶部下拉的距离来决定刷新时机。

# stop

类型： number
默认值： 40

回弹悬停的距离。BetterScroll 在派发 pullingDown 钩子之后，会立马执行回弹悬停动画。

# 实例方法

# `finishPullDown()`

介绍：结束下拉刷新行为。
参数：无
返回值：无

注意

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

# `openPullDown(config: PullDownRefreshOptions = {})`

介绍：动态开启下拉刷新功能。

参数：

{ PullDownRefreshOptions } config：修改 pulldown 插件的选项对象
PullDownRefreshOptions：类型如下

export type PullDownRefreshOptions = Partial<PullDownRefreshConfig> | true

export interface PullDownRefreshConfig {
  threshold: number
  stop: number
}

返回值：无

注意

openPullDown 方法应该配合 closePullDown 一起使用，因为在 pulldown 插件的生成过程当中，已经自动监测了下拉刷新的动作。

# `closePullDown()`

介绍：动态关闭下拉刷新功能。
参数：无
返回值：无

# `autoPullDownRefresh()`

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

# 事件

# `pullingDown`

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

危险

监测到下拉刷新的动作之后，pullingDown 钩子的消费机会只有一次，因此你需要调用 finishPullDown() 来告诉 BetterScroll 来提供下一次 pullingDown 钩子的消费机会。

← observe-dom pullup →