微信小程序实现下拉分页加载更多数据

1、使用scroll-view实现滚动下拉

wxml

      <scroll-view wx:if="{{plotArr.length > 0}}" scroll-y="{{true}}" style="margin:30rpx auto 80rpx;height:{{massifHeight}}px;" bindscrolltolower="lower">
        里面包着你的列表代码
      </scroll-view>

js

var http = require('../../utils/request.js'); //相对路径
data: {
    plotArr: [],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    flag:true  // 防抖开关 防止用户不停的下拉
  },
方法：
// 列表
getPlotList() {
    var params = {
      pageNum: this.data.pageNum,
      pageSize: this.data.pageSize
    }
    var that = this
    http.getRequest('/wx/userPlough/page', params, function (res) {
      if (res.code === 200) {
        let list = that.data.plotArr
        //先处理成你想要的数据 下面再去赋值
        res.rows.map(item=>{ 
          return item['pipelineData'] = JSON.parse(item.pipelineData)  
        })
        if (that.data.pageNum == 1) {
          list = []
        }
        // 新旧数据合并到一起
        list = [...list, ...res.rows]
        if (list.length < res.total ){
          that.setData({
            pageNum: that.data.pageNum + 1,
            flag:true
          })
        } else {
          that.setData({
            flag:false
          })
        }
        that.setData({
          plotArr: list,
          total: res.total
        })
      }
    }, function (res) {
    })
  },
  // 滚动到底触发的方法
  lower(){
    if(this.data.flag){
      this.setData({
        flag:false
      })
      this.getPlotList(); // 疯狂的请求的方法
    }
  },

2、使用小程序自带的下拉触底方法

wxml中直接用正常的view布局写就可以
js

data: {
    questList: [],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    flag: true,  // 防抖开关 防止用户不停的下拉
  },
  方法：
  // 问题列表
  getQuestList() {
    var that = this;
    var params = {
      pageNum: that.data.pageNum,
      pageSize: that.data.pageSize
    }
    http.getRequest('/wx/questionsAnswers/page', params, function (res) {
      if (res.code === 200) {
        let list = that.data.questList
        res.rows.map((item) =>{
          return item.t = false;
        })
        if (that.data.pageNum == 1) {
          list = []
        }
        list = [...list, ...res.rows]
        if (list.length < res.total ){
          that.setData({
            pageNum: that.data.pageNum + 1,
            flag:true
          })
        } else {
          that.setData({
            flag:false
          })
        }
        that.setData({
          questList: list,
          total: res.total
        })

      }
    }, function (res) {
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.flag){
      this.setData({
        flag:false
      })
      this.getQuestList(); // 疯狂的请求的方法
    }
  },

好像我写的这两种差别不大，但是纯属记录