我是做前端开发的周先生,有一段时间,一直在做这个功能,然后自己学习上有点心得,趁此我想把这个功能给分享出来,如果有需要,转载时,请附上该文章链接,谢谢@_@!!!!
以下以小程序为例子
一、自定义属性 data
newsList:[ ], //内容
newsTotal:0,//总数量
pageIndex:1, //页码
pageSize:10, //一页显示多少条数据
isMore:true //是否显示更多数据
二、方法 methods
async getNewsList(init){
if(init){
this.pageIndex = 1
this.more = true
}
wx.showNavigationBarLoading()
const res = await util.post('/api/content/getunreviewedcontent',{
page_index:this.pageIndex,
page_size:this.pageSize
})
if (res.list.length < this.pageSize && this.pageIndex > 1) {
this.isMore = false
}
if(init){
this.newsList = res.list
wx.stopPullDownRefresh()
}else{
// 下拉刷新,不能直接覆盖,而是累加
this.newsList = this.newsList.concat(res.list)
}
wx.hideNavigationBarLoading()
},
三、功能
//上拉加载
onReachBottom () {
if (!this.isMore ) {
// 没有更多了
return false
}
if(Math.ceil(this.newsTotal/this.pageSize)>this.pageIndex){
this.pageIndex++
this.getNewsList()
}
},
//下拉刷新
onPullDownRefresh(){
this.getNewsList(true)
},
//页面初始化
mounted(){
this.getNewsList(true)
}