uni-app实现上拉加载数据

这里我没有用官方给的方法，哪个放到手机上就没有效果，而且再开发阶段的时候，一般也不灵验，所以就自己写了一个，以后可以随时服用

这个getData（）和deteleObject（），自己随便定义的

第一步，先在全局定义

var page_num=1；//默认首次加载是第一页
样式自己看着定义把

{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}

第二步，

data(){
return{
loadingType: 0,
contentText: {
contentdown: “上拉显示更多”,
contentrefresh: “正在加载…”,
contentnomore: “加载完成”
},
headerPadding:0
}
}

第三步，再methods定义这两个方法

getData() {
page_num++;//每触底一次 page +1
if (this.loadingType != 0) return false;
this.loadingType = 1;
uni.getStorage({
key:‘access_token’,
success :(res) => {
this.token=res.data
let requestData = {
req_no: new Date().getTime() + “” + Math.floor(Math.random() * 10000000000),
access_token: this.token,
record_type: this.type,
page_no:page_num,
page_size:10,
timestamp: Date.now()
}
requestData.sign = sha(requestData);
uni.request({
url: ‘接口地址’,
data: requestData,
method: ‘POST’,
header: {
‘content-type’: ‘application/x-www-form-urlencoded’
},
success: (res) => {
this.datalist.push(…res.data.medal_records.list)//将得到的数据添加到新数组里
this.datalist = this.deteleObject(this.datalist, [‘create_time’])//去掉重复项（这里一般都是默认的是唯一的数据），再html里面直接遍历datalist这个数组即可
this.loadingType=2;
setTimeout(() => {this.loadingType = 0;}, 1000);
}
})
},
})
},
// 该方法用于对数组中重复的元素进行过滤
// 参数说明：
// arr：需要过滤的数组
// keys：过滤的条件（也就是根据什么过滤的）
deteleObject(arr, keys) {
return keys.reduce((r, k) => […r.reduce((m, x) => m.set(x[k], x), new Map()).values()], arr)
},

第四步： 再html调用方法

<scroll-view id=“efficacys” scroll-y=“true” @scrolltolower=“getData”>

总结，这个上拉加载很好用，适用于任何手机型号