最近写微信小程序,列表渲染啥的,经常用到一些分页,下拉刷新,上拉加载等功能,总结整理一下,微信小程序分页功能,下拉刷新功能,直接干货拿来就用,话不多说,肝着
作者简介:
我是痴心阿文,你们的学友哥!
📃个人主页:痴心阿文的博客
🔥本文前言:微信小程序分页功能,下拉刷新功能,直接干货拿来就用
💖如果觉得博主的文章有帮到你的话,请👍支持一下博主哦🤞
🔥🔥🔥直接上,分页功能
//分页,下拉加载
getlist(page, types){
if (this[types == 10 ? 'lastPage':(types == 11?'lastPage2':'lastPage3')] && page != 0) return
this[types == 10 ? 'page' :(types == 11?'page2':'page3') ] += page
let page_json = {
page: types == 10 ? this.page += page : this.page2 += page,
rows: 10,
tagid: types
}
console.log('let page_json', page_json)
if (page == 0) {
uni.showLoading({
title: '加载中'
})
}
const URL = getApp().globalData.appApi + '/gk/qrynewsbytagid'
this.$http.post_request(page_json, URL, res => {
console.log('查询分页啊', res)
uni.hideLoading()
if (types == 10) {
this.lastPage = res.model.lastPage
if (page == 0) {
this.hotnewslist = res.model.list
return
}
this.hotnewslist.push(...res.model.list)
} else if (types == 11) {
this.lastPage2 = res.model.lastPage
if (page == 0) {
this.realnewslist = res.model.list
return
}
this.realnewslist.push(...res.model.list)
}else if(types == 12){
this.lastPage3 = res.model.lastPage
if (page == 0) {
this.barContentList = res.model.list
return
}
this.barContentList.push(...res.model.list)
}
})
},
🔥🔥🔥上拉加载
//下拉刷新
onPullDownRefresh(){
if(this.tabIndex == 0){
this.getlist(0, 10);
return
}else if(this.tabIndex == 1){
this.getlist(0, 11);
return
}else if(this.tabIndex == 2){
this.getlist(0, 12);
return
}
setTimeout(function () {
uni.stopPullDownRefresh();
uni.showToast({
title:'刷新成功',
icon:'none',
duration:1500
})
}, 3000);
},
onShow() {
this.initData();
this.getlist(0, 10);
this.getlist(0, 11);
this.getlist(0, 12);
},