注意和后端配合就行了,前端也只能把数据拼接起来!
无论是下拉加载还是加载更多,一样的道理!
注意首次加载传递参数
注意每次加载数据数
wxml
<view class=‘table-rank‘> <view class=‘tables center‘ wx:for="{{ranklist}}" wx:for-index="idx" wx:key="prototype"> <view class=‘stage-rank‘> {{idx+1}} </view> <view class=‘name‘>{{item.name}}</view> <view class=‘price‘>{{item.count}}</view> </view> </view> <view class=‘more‘> <button loading="{{loading}}" disabled="{{disabled}}" catchtap="setLoading">{{loadText}}</button> </view>
js
var app = getApp().globalData;Page({ data: { loadText: ‘加载更多‘, ranklist: [], count: 1 }, onLoad: function(res) { // 首次加载:传参数num:0 let num = 0; let _page = this; let uid = wx.getStorageSync(‘uinfo‘).uid; wx.request({ url: ‘url‘, data: { uid, num }, header: { ‘content-type‘: ‘application/json‘ }, method: ‘GET‘, dataType: ‘json‘, responseType: ‘text‘, success(res) { _page.setData({ ranklist: res.data.all_list, me: res.data.me }); } }) }, //点击 加载更多 按钮 setLoading(e) { let _this = this; let _page = this; // 暂存数据 let ranklistBefore = _this.data.ranklist; let uid = wx.getStorageSync(‘uinfo‘).uid; // 每次加载数据条数(10) let num = _this.data.count++ * 10; wx.request({ url: app.api.simulation_ranking, data: { uid, num }, header: { ‘content-type‘: ‘application/json‘ }, method: ‘GET‘, dataType: ‘json‘, responseType: ‘text‘, success(res) { // 每次加载数据,请求一次就发送10条数据过来 let eachData = res.data.all_list; if (eachData.length == 0) { wx.showToast({ title: ‘没有更多数据了!~‘, icon: ‘none‘ }) } else { wx.showToast({ title: ‘数据加载中...‘, icon: ‘none‘ }) } _page.setData({ loadText: "数据请求中", loading: true, ranklist: ranklistBefore.concat(eachData), loadText: "加载更多", loading: false, }); } }) }});