微信小程序上拉加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_42460570/article/details/83542444

上拉加载需求 我们首先是要监听页面触底,

onReachBottom是小程序提供的方法,

思路就是在页面触底时 请求数据 然后再push到列表的变量里

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    homeList: [], //主页页面
    page: 1, //分页
    TostShow: false,//loading
    isHide: 'none',//已经到底了
    off_on: false,//开关
  },
  //事件处理函
  onLoad: function(option) {
    let that = this;
    that.loadList()
  },

  //获取科室数据
  loadList() {
    let that = this
    var off_on = that.data.off_on //下拉开关
    if (off_on == true) {
      return
    }
    off_on = true
    that.loadingShow()
    wx.request({ //非真实接口 仅供示例
      url: 'https://xxx.xxx.com/app/api/xxx_xxx_app.php?type=home_list' + "&page=" + that.data.page,
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      success: function(res) {
        that.loadingHide()
        if (res.data.list.length > 0) {  //判断有没有数据返回
          var list = that.data.homeList
          for (var i = 0; i < res.data.list.length; i++) {
            list.push(res.data.list[i])  //有数据就push到homeList里
          }
          that.setData({
            homeList: list,
            off_on: false
          })
        } else {  //如果没有数据
          that.setData({
            isHide: 'none',//显示已经到底
            TostShow: true,//关闭加载loading
            off_on: true  //开关打开不在触发loadList方法
          })
        }
      }
    })
  },
  //上滑加载
  onReachBottom: function() {
    var that = this;
    that.data.page++
      that.loadList()
  },
  //loadingShow
  loadingShow() {
    var that = this
    that.setData({
      hidenLoad: true,
      isHide: 'block',
    })
  },
  loadingHide() {
    var that = this
    that.setData({
      hidenLoad: true,
      isHide: 'none',
    })
  },

 
})