美文网首页
微信小程序 -分页加载-onReachBottom上拉触底加载

微信小程序 -分页加载-onReachBottom上拉触底加载

作者: 端木安玉 | 来源:发表于2019-12-05 14:24 被阅读0次

    运用到的方法

    onReachBottom

    当上拉至底部时就会触发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) { },
              })
          }
        }
      }
    

    后台获取到 page 自己添加功能即可

    相关文章

      网友评论

          本文标题:微信小程序 -分页加载-onReachBottom上拉触底加载

          本文链接:https://www.haomeiwen.com/subject/rbmdgctx.html