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