分页一般是触底之后刷新更多,uniapp中有个触底的事件,onReachBottom()
核心的代码其实是es6的 ...三个点扩展运算符,和触底之后再次调用,页码递增
//获取列表
getList(){
//我自己封装挂载到vue原型上的方法
this.$API.getList({
//页码
pageNum:this.pageNum,
//一页多少条数据
pageSize:this.pageSize
}).then( res => {
//数据合并,es6扩展运算
this.list = [...this.list,...res.data.list]
})
}
//重点,触底事件
onReachBottom(){
// 页码加1
this.pageNum ++
//再次调用方法,通过数组合并,实现分页加载功能,是不是很简单
this.getList()
}
这是uniapp中封装了滚动触底事件,可以直接使用。
如果没有这个事件怎么办呢,pc端想使用的话,需要通过滚动事件,获取当前dom元素的高度,如果滚动的距离和dom元素的高度到某个值的时候,再次调用。其实原理是一样的,核心就是合并数组和页码递增
希望这篇文章可以帮助到大家