mpvue开发微信小程序上拉加载功能（代码全）

先上图 看效果：刚进入页面是8条数据，取消地区后是68条数据 这里 每15条数据分一页，滚动底部自动加载新的一个接口push到列表中；滚动中可以看接口请求一直在添加 到最后无数据 就不会发起新的请求

 

准备开始：

基于mpvue 在main.js中

import Vue from 'vue'
import App from './index'

// add this to handle exception
Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}

const app = new Vue(App)
app.$mount()
export default {
  config: {
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundTextStyle": "light", 
    "enablePullDownRefresh": true,
  }
}

功能代码：

其实就是 在与methods同级下面写上拉加载和下拉刷新的方法

methods(){
 _getRegisterInfo () {
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      wx.showLoading({
        title: '玩命加载中',
      })
      // 后台接口可忽略
      get('/os-wx-bee/sso/getRegisterInfo.html?pageNum='+pageNum+'&pageSize='+pageSize,{}).then(res => {
        if(res.code === 0){
          if(res.data.listPartner.length){
            this.sellerList.push(...res.data.listPartner);
          }else{

          }
          wx.hideLoading();
        }
      }).catch(err => {
        console.log(err);
      });
   	 }
  },
},
// 上拉加载
onReachBottom: function ()