一. 向上拉刷新数据,新数据在之前数据下方显示
前提条件:后台数据要返回是否还有下一页,数据总数 ,当前第几条
hasNextPage:true //是否可以下一页
lists:[] //显示数据
pageIndex:0,
/***
force 参数 值:true 在初始值时调用
***/
async getList(options = {}) {
try {
if (options.force) {
this.pageIndex = 0
this.data.hasNextPage = true
}
if (this.data.hasNextPage) {
const { pageNum, hasNextPage, list } = await request.get('/api', {
pageNum: this.pageIndex + 1,
pageSize: 10
})
this.pageIndex = (hasNextPage && pageNum) || 0
this.setData({
hasNextPage: hasNextPage || false,
lists: [...(options.force ? [] : this.data.lists), ...(list || [])]
// 如果是force为true,先去空,然后拼接list数据
//反之,原来的数据lists拼接list数据
})
}
} catch (error) {
throw error
}
//调用
onLoad(){
this.getList({ force: true })
}
onReachBottom() {
this.getList()
}
2.直接拼接数据
this.setData({lists: pageNum === 1 ? list : list.concat(this.data.lists) })