记录一次vue+MUI的分页上拉加载更多

vue+mui的上拉加载更多

先引入要用的JS（若没有可以问我要）

  import mui from 'static/js/mui'
  import 'static/js/mui.pullToRefresh.js'
  import 'static/js/mui.pullToRefresh.material.js'

在mounted中先进行mui的初始化

mounted () {
      mui.init()
      var that = this
      window.onready = (function ($) {
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, // 是否显示滚动条
          deceleration: deceleration
        })
        $.ready(function () {
          // 循环初始化所有下拉刷新，上拉加载。
          $.each(document.querySelectorAll('.mui-slider-group'), function (index, pullRefreshEl) {
            $(pullRefreshEl).pullToRefresh({
              up: {
                height: 10, // 可选.默认50.触发上拉加载拖动距离
                auto: false, // 可选,默认false.自动上拉加载一次
                contentrefresh: '<a class="loadingImages"></a>', // 可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '已到底了', // 可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function () {
                  var self = this
                  that.tabUp(index, self)
                }
              }
            })
          })
        })
      })(mui)

data的数据中我设置了分页页码、分页条数、是否最后一页标志

 data () {
      return {
      // 数据列表
        promiseList: [],
        // 用于请求列表时做判断以及后台参数
        pageSize: 10,
        // 页码
        pageNo: 1,
        // 同pageSize,由于下拉加载更多后length长度变化，用于下拉加载更多与progressList.length作判断
        page: 10,
        // 是否最后一页标识
        isLastPage: false,
        noMore: '上拉加载更多',
      }
    },

methods中上拉加载更多触发的方法以及数据请求

      // 上拉加载更多
      tabUp (index, self) {
      // 不是最后一页时执行
        if (!this.isLastPage) {
          console.log('上拉加载更多：')
          // 下拉一次页码+1
          this.pageNo++
          console.log('index' + this.setIndex)
          console.log(this.pageNo)
          if (this.promiseList.length == this.page) {
            console.log('加载中')
            this.queryAllList()
            // 每加载一次长度增加this.pageSize
            this.page = this.page + this.pageSize
          }
        }
        setTimeout(function () {
          self.endPullUpToRefresh()
        }, 1000)
      },

      // 列表
      queryAllList () {
      此处接口请求，根据实际情况请自行修改
        this.$axios.post(this.$store.state.baseConfig.baseUrl + 'listApplyPage', this.$qs.stringify({
          'userId': JSON.parse(localStorage.getItem('user')).userId,
          'type': '1',
          'auditStatus': this.setIndex,
          'orderTime': '',
          'pageSize': this.pageSize,
          'pageNo': this.pageNo
        })).then((res) => {
          console.log(res.data)
          // 当请求总条数比分页条数少
            if (res.data.result.length < this.pageSize) {
              this.isLastPage = true
              this.noMore = '没有更多了'
            }
            if (this.pageNo == 1) {
              this.promiseList = res.data.result
            }
            if (this.pageNo > 1) {
              // 防止相等时无限concat，拿新请求第一个与当前最后一个作对比
              let length = this.promiseList.length - this.pageSize
              if (res.data.result[0].wxOrder.id == this.promiseList[length].wxOrder.id) {相比的数据自行修改
                this.isLastPage = true
                this.noMore = '没有更多了'
              } else {
                this.promiseList = this.promiseList.concat(res.data.result)
              }
            }
          }
        })
      },