uni-app中下拉刷新
时间: 2024-01-17 13:18:50 浏览: 37
在uni-app中,可以通过监听`enablePullDownRefresh`事件来实现下拉刷新功能。具体步骤如下:
1. 在对应页面的`methods`中监听`onPullDownRefresh`事件:
```javascript
onPullDownRefresh() {
// 重置关键数据
this.queryObj.pagenum = 1; // 重置页码值
this.total = 0; // 重置总数
this.isloading = false; // 重置节流阀
this.goodsList = []; // 重置商品列表信息
// 重新发起请求:请求发送成功以后传入一个回调函数,回调函数停止下拉刷新
this.getGoodsList(() => uni.stopPullDownRefresh());
}
```
2. 在项目的根目录打开`page.json`,找到对应的页面,在下面添加`enablePullDownRefresh`配置项:
```json
{
"path": "goods_list/goods_list",
"style": {
"navigationBarTitleText": "商品列表",
"enablePullDownRefresh": true, // 开启下拉刷新
"backgroundColor": "#F8F8F8",
"onReachBottomDistance": 150
}
}
```
这样就可以在uni-app中实现下拉刷新功能了。