注意和后端配合就行了,前端也只能把数据拼接起来!
无论是下拉加载还是加载更多,一样的道理!
注意首次加载传递参数
注意每次加载数据数
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,
});
}
})
}
});