Vue中使用better-scroll实现下拉刷新，上拉加载功能。

使用better-scroll实现下拉刷新和上拉加载功能，需要先安装better-scroll插件。

1. 安装better-scroll

npm install better-scroll --save

2. 导入better-scroll

import BScroll from 'better-scroll'

3. 创建better-scroll实例

mounted() {
  this.initScroll()
},
methods: {
  initScroll() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3, // 实时派发scroll事件
      click: true, // 开启点击事件
      pullDownRefresh: true, // 开启下拉刷新
      pullUpLoad: true // 开启上拉加载
    })
  }
},

4. 监听下拉刷新和上拉加载事件

this.scroll.on('pullingDown', () => {
  // 下拉刷新业务逻辑
  this.scroll.finishPullDown() // 完成下拉刷新
  this.scroll.refresh() // 重新计算滚动区域
})

this.scroll.on('pullingUp', () => {
  // 上拉加载业务逻辑
  this.scroll.finishPullUp() // 完成上拉加载
  this.scroll.refresh() // 重新计算滚动区域
})

5. 在模板中添加DOM元素

<div class="wrapper" ref="wrapper">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

6. 完整代码示例

<template>
  <div class="scroll-wrapper">
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <ul>
          <li v-for="item in list" :key="item.id">{{ item.title }}</li>
        </ul>
      </div>
      <div class="pullup-wrapper">
        <div class="pullup">
          <span v-show="!isPullUpLoad">上拉加载更多</span>
          <span v-show="isPullUpLoad">正在加载中...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        list: [], // 列表数据
        isPullUpLoad: false // 是否正在上拉加载
      }
    },
    mounted() {
      this.initScroll()
    },
    methods: {
      initScroll() {
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: 3, // 实时派发scroll事件
          click: true, // 开启点击事件
          pullDownRefresh: true, // 开启下拉刷新
          pullUpLoad: true // 开启上拉加载
        })

        // 监听下拉刷新和上拉加载事件
        this.scroll.on('pullingDown', () => {
          // 下拉刷新业务逻辑
          this.scroll.finishPullDown() // 完成下拉刷新
          this.scroll.refresh() // 重新计算滚动区域
        })

        this.scroll.on('pullingUp', () => {
          // 上拉加载业务逻辑
          this.isPullUpLoad = true // 正在上拉加载
          setTimeout(() => {
            this.isPullUpLoad = false // 完成上拉加载
            this.scroll.finishPullUp() // 完成上拉加载
            this.scroll.refresh() // 重新计算滚动区域
          }, 1000)
        })
      }
    }
  }
</script>

<style>
  .scroll-wrapper {
    height: 100%;
    overflow: hidden;
  }

  .wrapper {
    height: 100%;
    overflow: auto;
  }

  .pullup-wrapper {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .pullup {
    height: 40px;
    line-height: 40px;
  }
</style>