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

最新推荐文章于 2020-04-27 11:04:47 发布

就像风1样

最新推荐文章于 2020-04-27 11:04:47 发布

阅读量374

点赞数

分类专栏： Vue mpvue 微信小程序 MpVue 微信小程序文章标签： mpvue 微信小程序上拉加载

本文链接：https://blog.csdn.net/qq_42221334/article/details/89711136

版权

本文介绍了如何使用mpvue框架在微信小程序中实现上拉加载更多的功能。通过在main.js中配置方法，并在页面滚动到底部时调用加载新数据的接口，动态追加数据到列表中。利用mpvue-weui组件库，使得实现过程更加便捷。

摘要由CSDN通过智能技术生成

先上图看效果：刚进入页面是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 ()