小程序分页加载onReachBottom上拉触底加载--小程序走过的坑

  data: {
    limit: 11,//显示数据量
    list: '',
    page: 1,//当前页
    load: true,
    loading: false,//加载动画的显示
 
  },  
 
onReachBottom: function () {
    var that = this;
    if (that.data.load) {//全局标志位,方式请求未响应是多次触发
      if (that.data.list.length < that.data.count) {
          that.setData({
            load: false,
            loading: true,//加载动画的显示
          })
          wx.request({
            url: 'url',
            data: {
            },
            method: 'POST',
            success: function (res) {
              console.log(res)
              var content = that.data.list.concat(res.data.data.list)//将放回结果放入content
              that.setData({
                list: content,
                page: that.data.page * 1 + 1,
                load: true,
                loading: false,
               })
            },
            fail: function (res) {
                that.setData({
                  loading: false,
                  load: true,
                })
                wx.showToast({
                  title: '数据异常',
                  icon: 'none',
                  duration: 2000,
                }) 
               },
            complete: function (res) { },
          })
      }
    }
  },

实际应用:

//index.js
//获取应用实例
const app = getApp();
var request = require('../../../utils/request.js');
Page({
  data: {
    motto: 11,
    nan : '../../../images/49927.png',//男
    nv : '../../../images/9980.png',//女

    userlist:[],
    p:1,
    count:'',
  },

  orderlist:function(){  
     var that=this
    // if(that.data.count>that.data.userlist.length){
      request.get('/api/user/user_team', {
        data:{
          p:that.data.p,
        },
          success: function (res) {
            console.log('res*************',res)
            var content = that.data.userlist.concat(res.data.result.data)//将放回结果放入userlist
            that.setData ({
              count:res.data.result.count,
              userlist:content,
              p: that.data.p * 1 + 1,
            })
            

          }
      });
  
    // }
  },

  onLoad: function () {
    // 加载函数
    var that=this
    that.orderlist();
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // https://jsonplaceholder.typicode.com/posts   测试数据
    var that=this
    if(that.data.userlist.length<that.data.count){
    that.orderlist();
  }


  




  },





})

你可能感兴趣的:(小程序)