小程序上拉后懒加载显示的信息,wxml代码:
<view class="cu-list menu-avatar">
<view class="cu-item" wx:for="{{content}}">
<view class="content" style="margin-left: -120rpx;">
<view class="text-grey">{{item.TITLE}}</view>
<view class="text-gray text-sm flex">
<text class="text-cut">{{item.CONTENT}}</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">{{item.CREATE_TIME}}</view>
</view>
</view>
</view>
js文件中的data:
data: {
content: [],
page : 1,
page_size: 5, //每页加载十个
},
页面加载时onLoad函数中查询第一页信息:
wx.request({
url: 'http://ip:端口/接口路径?page=' + that.data.page + '&rows=' + that.data.page_size,
method: 'POST',
header: {'Content-Type': 'application/x-www-form-urlencoded'},
success: function (bres) {
var arr2 = bres.data.obj; //从此次请求返回的数据中获取新数组
that.setData({
content: arr2 //合并后更新content
})
}
})
下拉到底后触发的又一次查询:
getdatalist: function (e) {
var that = this
wx.request({
url: 'http://ip:端口/接口路径?page=' + that.data.page + '&rows=' + that.data.page_size,
method: 'POST',
header: { 'Content-Type': 'application/x-www-form-urlencoded' },
success: function (bres) {
var arr1 = that.data.content; //从data获取当前datalist数组
var arr2 = bres.data.obj; //从此次请求返回的数据中获取新数组
arr1 = arr1.concat(arr2); //合并数组
that.setData({
content: arr1 //合并后更新datalist
})
}
})
},
触发下拉到底的函数:
onReachBottom: function () {
var that = this;
var page = that.data.page + 1; //获取当前页数并+1
that.setData({
page: page, //更新当前页数
})
that.getdatalist();//重新调用请求获取下一页数据
},
这样就实现懒加载了,说白了就是将老数组和新数组的值合并显示。