uni-app中的onReachBottom
时间: 2023-10-19 16:06:47 浏览: 47
在uni-app中,onReachBottom()是一个页面事件,它会在页面滚动到底部时触发。该事件常用于实现下拉加载更多数据的功能。要使用onReachBottom(),你需要在页面的同级位置写出该事件,并确保页面不是固定的。具体写法如下所示:
```
onReachBottom() {
// 判断是否有数据
if (this.pageInfo.page * this.pageInfo.size >= this.pageInfo.total) {
// 如果数据已经加载完毕,将状态设为“noMore”
this.status = "noMore";
return;
} else {
// 如果还有数据需要加载,将状态设为“loading”
this.status = "loading";
// 传递页码给后端接口,获取列表数据
this.pageInfo.page++;
// 在获取列表数据的事件中,根据状态判断是否只加载新获取的数据,或者将新数据拼接到已有数据之后
this.getList('loading');
// 获取数据
}
}
```
请注意,以上代码中的`this.pageInfo.page`代表当前页面的页码,`this.pageInfo.size`代表每页显示的条数,`this.pageInfo.total`代表总数据条数。根据这些信息,可以判断是否还有更多数据需要加载。另外,`this.status`表示页面的状态,可以根据不同的状态展示相应的UI效果,如显示“正在加载中”或“没有更多数据了”。