uniapp项目中监听用户的下拉刷新事件

最新推荐文章于 2025-03-07 16:26:51 发布

寄相思予代码

最新推荐文章于 2025-03-07 16:26:51 发布

阅读量991

点赞数

文章标签： uni-app 前端

本文链接：https://blog.youkuaiyun.com/weixin_72503508/article/details/129689559

版权

在pages.json中配置启用下拉刷新，并设置页面样式。在onPullDownRefresh事件中重置数据并调用获取数据的方法，完成后使用uni.stopPullDownRefresh关闭下拉刷新。getGoodsList方法异步获取数据并执行回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在 pages.json 配置文件中找到需要监听用户下拉刷新的页面修改配置如下：

{
   "path" : "goods_list/goods_list",
   "style" :                                                                                    
  {
     "navigationBarTitleText": "",

     // 开启下拉刷新
     "enablePullDownRefresh": true,
    
     // 页面背景色   就是下拉的那个颜色
     "backgroundColor": "#f8f8f8", 
    
     "onReachBottomDistance": 150
  }

}

2. 页面通过 onPullDownRefresh 回调监听用户下拉刷新的动作，并做相应的处理如下：

    onPullDownRefresh() {

// 页码重置为  第一页
      this.queryObj.pagenum = 1

// 总数据 重置为 0
      this.total = 0

// 关闭节流阀
      this.isLoading = false

// 数据重置为空数组
      this.goodsList = []
      
// 重点：重新调用获取数据的函数 并且传一个 回调 uni.stopPullDownRefresh() 用来关闭下拉刷新
      this.getGoodsList(() => uni.stopPullDownRefresh())
    }

3. 在获取数据的函数中通过 cb 接收回调并使用

    async getGoodsList(cb){
        this.isLoading = true
        const {message:{total, goods}} = await api.getData("/goods/search", this.queryObj)
        // console.log(message)
        this.isLoading = false

        // 随便定义一个字段接收    通过短路运算符 && 判断有的话就执行            
        cb && cb()
        
        this.goodsList = [...this.goodsList, ...goods]
        this.total = total
      }