微信小程序实现底部加载

使用组件scroll-view
<scroll-view scroll-y="true" bindscrolltolower="load" class="scroll-loading" style="height:{{windowHeight}}px;">

<view class="projectList" wx:for="{{projectList}}">

    </view>
</scroll-view>
loading:function () {
    var that = this;
    wx.request({
        method: 'GET',
        url: '',
        data: {
            offset: that.data.pageSize * (that.data.page - 1),
            limit: that.data.pageSize
        },
        header: {
            'content-type': 'application/json', // 默认值
        },
        success: function(res) {
            console.log(res.data);
            if (res.statusCode == 200) {
                if (that.data.page === 1) {
                    that.setData({
                        projectList:res.data
                    });
                } else {
                    var words = that.data.projectList.concat(res.data);
                    that.setData({
                        projectList: words
                    })
                }

            } else {

            }
        }
    });
},

onLoad:function () {
    var that = this;
    that.loading();
    //获取屏幕高度
    wx.getSystemInfo({
        success: function (res) {
            that.setData({
                windowHeight: res.windowHeight
            });
            console.log("屏幕高度: " + res.windowHeight)
        }
    })
},
 
 
load:function () {
  var that = this;
  that.setData({
      page :that.data.page + 1
  });
  that.loading();
},

猜你喜欢

转载自blog.csdn.net/ttn456456/article/details/79991820