微信小程序分頁加載列表

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 }) 　　　　　　} 　　　　}) 　　}})