前端常见的《下拉刷新，上拉加载》功能

我是做前端开发的周先生，有一段时间，一直在做这个功能，然后自己学习上有点心得，趁此我想把这个功能给分享出来，如果有需要，转载时，请附上该文章链接，谢谢@_@!!!!

以下以小程序为例子

一、自定义属性 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)

}

转载于:https://www.cnblogs.com/zhoudawei/p/9234386.html