vue项目使用better-scroll实现移动端上拉加载更多、下拉刷新效果，并进行封装处理

1.封装的组件 MyScrollMore.vue代码如下：

<!--封装上拉加载更多、下拉刷新组件-->
<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'

export default {
  props: {
    /**
     * 1 滚动的时候会派发scroll事件，会截流。
     * 2 滚动的时候实时派发scroll事件，不会截流。
     * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
     */
    probeType: {
      type: Number,
      default: 1
    },
    /**
     * 点击列表是否派发click事件
     */
    click: {
      type: Boolean,
      default: true
    },
    /**
     * 是否开启横向滚动
     */
    scrollX: {
      type: Boolean,
      default: false
    },
    /**
     * 是否派发滚动事件
     */
    listenScroll: {
      type: Boolean,
      default: false
    },
    /**
     * 列表的数据
     */
    data: {
      type: Array,
      default: null
    },
    /**
     * 是否派发滚动到底部的事件，用于上拉加载
     */
    pullup: {
      type: Boolean,
      default: false
    },
    /**
     * 是否派发顶部下拉的事件，用于下拉刷新
     */
    pulldown: {
      type: Boolean,
      default: false
    },
    /**
     * 是否派发列表滚动开始的事件
     */
    beforeScroll: {
      type: Boolean,
      default: false
    },
    /**
     * 当数据更新后，刷新scroll的延时。
     */
    refreshDelay: {
      type: Number,
      default: 20
    }
  },
  mounted () {
    // 保证在DOM渲染完毕后初始化better-scroll
    setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods: {
    _initScroll () {
      if (!this.$refs.wrapper) {
        return
      }
      // better-scroll的初始化
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click,
        scrollX: this.scrollX,
        pullDownRefresh: {
          threshold: 40, // 刷新时机
          stop: 0 // 回弹停留的距离
        },
        pullUpLoad: {
          threshold: 50 // 开始加载的时机
        }
      })

      // 是否派发滚动事件
      if (this.listenScroll) {
        let me = this
        this.scroll.on('scroll', (pos) => {
          me.$emit('scroll', pos)
        })
      }

      // 是否派发滚动到底部事件，用于上拉加载
      if (this.pullup) {
        this.scroll.on('pullingUp', () => {
          // 滚动到底部
          this.$emit('scrollToEnd')
          // 上拉加载更多结束，要执行finishPullUp事件告诉 better-scroll 数据已加载
          this.scroll.finishPullUp()
        })
      }
      // 是否派发顶部下拉事件，用于下拉刷新
      if (this.pulldown) {
        this.scroll.on('pullingDown', (pos) => {
          // 下拉动作
          this.$emit('pulldown')
          // 下拉刷新结束，要执行finishPullDown事件告诉 better-scroll 数据已加载
          this.scroll.finishPullDown()
        })
      }
      // 是否派发列表滚动开始的事件
      if (this.beforeScroll) {
        this.scroll.on('beforeScrollStart', () => {
          this.$emit('beforeScroll')
        })
      }
    },
    disable () {
      // 代理better-scroll的disable方法
      this.scroll && this.scroll.disable()
    },
    enable () {
      // 代理better-scroll的enable方法
      this.scroll && this.scroll.enable()
    },
    refresh () {
      // 代理better-scroll的refresh方法
      this.scroll && this.scroll.refresh()
    },
    scrollTo () {
      // 代理better-scroll的scrollTo方法
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement () {
      // 代理better-scroll的scrollToElement方法
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch: {
    // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
    data () {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style scoped lang="scss">

</style>

2.页面使用：

<template>
  <div class="address-container">
    <my-scroll-more class="address-list-content" ref="scrollWrapper"
                    :data="addressList"
                    :probeType="2"
                    :pulldown="pulldown"
                    :pullup="pullup"
                    :listenScroll="listenScroll"
                    @scroll="scrollShow"
                    @scrollToEnd="loadMore"
                    @pulldown="refreshData">
      <ul class="address-content">
        <!--li数据遍历循环部分，即页面加载更多展示的内容-->
        <li class="address-item" v-for="(item,index) in addressList" :key="index">
          <div class="address-info">
            <div class="name-item">
              <span class="name">{{item.receiverName}}</span>
              <span class="phone">{{item.receiverPhone}}</span>
            </div>
            <p class="address-detail word-break">{{item.receiveProvince}} {{item.receiveCity}} {{item.receiveDistrict}}
              {{item.receiveAddress}}</p>
          </div>
          <i class="iconfont icon-edit btn-edit" @click="editAddress(item.id)"></i>
        </li>
        <!--底部判断是加载图标还是提示“全部加载”-->
        <li class="more-loading-content">
          <mt-spinner class="loading-icon" type="snake" color="#26a2ff" :size="30" v-show="!isAllLoad"></mt-spinner>
          <span class="loading-font" v-show="isAllLoad && !dataEmpty">已全部加载</span>
        </li>
      </ul>
      <div v-if="dataEmpty" class="empty-content">
        <img class="empty-img" :src="emptyImg" alt="抱歉，暂时没有相关的信息">
        <p class="empty-tips-font">您还没有收货地址哦，赶紧添加一个吧！</p>
      </div>
      <div v-show="dropDown" class="drop-down">下拉刷新</div>
      <div class="toTop" @click="scrollToTop" v-if="toTopShow">
        <i class="iconfont icon-toTop"></i>
      </div>
    </my-scroll-more>
  </div>
</template>

<script>
import MyScrollMore from '@/views/components/MyScrollMore'
import emptyAddress from '../../../assets/images/empty-address.png'
import { listAddress } from '@/api/address'

export default {
  name: 'AddressContent',
  components: {
    MyScrollMore
  },
  data () {
    return {
      // 收货地址列表
      addressList: [],
      // 分页参数
      pageParams: {
        index: 1,
        size: 10,
        totalPage: 0
      },
      emptyImg: emptyAddress, // 空地址图片
      dropDown: false, // 是否显示下拉刷新提示
      pulldown: true, // 是否开启下拉刷新事件
      pullup: true, // 是否开启上拉加载事件
      listenScroll: true, // 是否开启滚动监听
      toTopShow: false, // 回到顶部按钮是否显示
      isAllLoad: false, // 是否完全加载
      dataEmpty: false // 找不到商品
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 根据页面参数判断是请求下单地址还是推单地址
    getData () {
      if (this.addressType === 0) {
        this.getList('settle')
      } else if (this.addressType === 1) {
        this.getList('push')
      }
    },
    // 获取收货地址列表
    getList (val) {
      this.isAllLoad = false
      this.dataEmpty = false
      if (!this.isAllLoad) {
        // 这里是请求接口数据，可直接套用模板
        listAddress(this.pageParams, val).then(res => {
          this.addressList = this.addressList.concat(res.data.records)
          this.pageParams.totalPage = res.data.pages
          // 如果请求不到数据，则显示找不到商品
          if (this.addressList && this.addressList.length === 0) {
            this.dataEmpty = true
            this.isAllLoad = true
            // 请求有数据，但是只有一页，请求完后显示加载完毕
          } else if (this.addressList && this.addressList.length < this.pageParams.size) {
            this.isAllLoad = true
            // 请求多页，到最后一页数据不足页数个数时则为请求完毕
          } else if (this.addressList && this.addressList.length >= this.pageParams.size && res.data.records.length < this.pageParams.size) {
            this.isAllLoad = true
          }
        })
      }
    },
    // 加载更多
    loadMore () {
      if (this.pageParams.index < this.pageParams.totalPage) {
        this.pageParams.index++
        this.getData()
      }
    },
    // 下拉刷新
    refreshData () {
      this.isAllLoad = false
      this.addressList = [] // 重置数据
      this.pageParams.index = 1
      this.getData()
    },
    // 下拉刷新时显示提示文字，上拉显示回到顶部按钮
    scrollShow (pos) {
      // console.log(pos.y)
      this.toTopShow = pos.y < -500
      // 如果下拉超过40px 就显示下拉刷新的文字
      if (pos.y > 40) {
        this.dropDown = true
      } else {
        this.dropDown = false
      }
    },
    // 点击回到顶部
    scrollToTop () {
      this.$refs.scrollWrapper.scrollTo(0, 0, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
  .address-container{
    .drop-down{
      top: 180px;
    }
    .address-list-content{
      position: absolute;
      top: 196px;
      width: 750px;
      bottom: 0;
      overflow: hidden;
      .address-content {
        min-height: calc(100% + 1px); //css3计算属性设置高度
      }
    }
  }

</style>