1、背景

在移动端开发时，经常会遇到展示列表数据的情况，当列表数据过多时会通过分页进行展示。

每页加载一定的数据，当翻到页面底部时，再加载第二页的数据。

2、实现

根据上面的描述，我们需要处理两件事：

• 要知道当前页面已经滚动到底部；
• 滚动到底部时加载下一页的数据；

2.1 获取数据函数实现

data:{
list:[],
page:1,
pageSum:'0'
},
getList(){
api.getList({
page:this.data.page
}).then(
res=>{
let list
if(this.data.page == 1){
//若请求第一页，则直接赋值
list = res.list
}else{
//否则将获取的数据与原数据合并
list = this.data.list.concat(res.list)
}
this.setData({
list:list
})
})
}

实际案例中的做法

data(){
shownDatas:[],
pageSize:10,
pageNum:1,
}
getDatas(){
uni.$api.productionDefectitemTodayDefectitem({
	pageNum: this.pageNum,
	pageSize: this.pageSize,
	searchValue: this.searchValue
	}).then(
        res=>{
        
        if (this.pageNum == 1) 
        this.shownDatas = rows
	else this.shownDatas = this.shownDatas.concat(rows)
	this.hasMore = total > this.form.pageNum * this.form.pageSize
        }
        
        )
}

2.2 滚动到底部触发

<u-list @scrolltolower="scrolltolower">

</u-list>

scrolltolower(e){
   if(this.hasMore){
       this.form.pageNum++
      this.getDatas()
}
}