微信小程序分頁加載列表

1.假設加載的數據為

2.wxml

<view class="page">
　　<view class="page__bd">
　　　　<view class="weui-cells searchbar-result" wx:for="{{list}}" wx:key="id">
　　　　　　<navigator url="" class="weui-cell" hover-class="weui-cell_active">
　　　　　　　　<view class="weui-cell__bd">
　　　　　　　　　　<view>{{item.vipname}}</view>
　　　　　　　　　　<text style='font-size:0.6rem'>性別:{{item.usersex}} 出生日期:{{item.vipbirthday}}
　　　　　　　　　　</text>
　　　　　　　　</view>
　　　　　　</navigator>
　　　　</view>
　　</view>
　　<view class="weui-loadmore weui-loadmore_line" hidden='{{hasmoreData}}'>
　　　　<view class="weui-loadmore__tips weui-loadmore__tips_in-line">暫無更多數據</view>
　　</view>
　　<view class="weui-loadmore" hidden='{{hiddenloading}}'>
　　　　<view class="weui-loading"></view>
　　　　<view class="weui-loadmore__tips">正在加載</view>
　　</view>
</view>

注意：wxss為weui

3.js

const app = getApp()
Page({

　　data: {
　　　　param:null,
　　　　list: [],//會員列表
　　　　total: 0,//分頁總數
　　　　pageNum: 0,//分頁記錄數
　　　　pageSize: 20,//分頁大小
　　　　hasmoreData: true,//更多數據
　　　　hiddenloading: true//加載中
　　},

　　onLoad: function (option) {
　　　　this.getList();
　　},
　　onReachBottom: function () {
　　　　console.log('加載更多')
　　　　this.setData({ hiddenloading: false })
　　　　this.getList()
　　},
　　getList: function () {
　　　　var that = this;
　　　　if (that.data.hasmoreData == false) {
　　　　　　that.setData({ hiddenloading: true })
　　　　　　return;
　　　　}
　　　　that.data.param.pageNum = that.data.pageNum;
　　　　that.data.param.pageSize = that.data.pageSize;
　　　　app.globalData.request.postRequest(app.globalData.config.Url, that.data.param, function (res) {
　　　　　　console.log(res.data)
　　　　　　that.setData({
　　　　　　　　total:res.data.total,
　　　　　　　　list: that.data.list.concat(res.data.rows),
　　　　　　　　pageNum: that.data.pageNum + 1
　　　　　　})
　　　　　　if (that.data.total <= 0 || that.data.pageNum * that.data.pageSize >= that.data.total) {
　　　　　　　　that.setData({ hasmoreData: false, hiddenloading: true })
　　　　　　}
　　　　})
　　}
})