手机端的滚动加载其实就是PC端的分页,触底之后页数加一调用接口,将返回的数据连接在原来的数据后面,就大致完成了。
使用组件
https://ext.dcloud.net.cn/plugin?id=29
<uni-load-more :status="loadmore":contentText="contentText"></uni-load-more>
export default {
data() {
return {
ifBottomRefresh:false,
loadmore: 'more',
contentText: {
"contentdown": "加载更多数据",
"contentrefresh": "加载中...",
"contentnomore": "暂无更多数据。"
},
current: 1,
size: 10,
tableData:[]
}
},
onReachBottom() {
// console.log('触底')
this.current += 1
// 没有更多数据之后 就不会在触底加载
if (this.loadmore == 'noMore') return
this.ifBottomRefresh = true
this.getData() // 触底 拉取数据
},
created(){
this.getData()
},
methods:{
getData() {
const params = {
size: this.size,
current: this.current
}
recommendList(params).then(res => {// 从接口里拿数据 使用时 换成自己的
//判断是触底加载还是第一次进入页面的加载
if (this.ifBottomRefresh) {
this.tableData= this.tableData.concat(res.content.records)
} else {
this.tableData= res.content.records
}
this.ifBottomRefresh = false
this.loadmore = this.tableData.length < res.content.total ? 'more' : 'noMore'
})
},
}
}