小程序API —— 56页面处理函数 - 下拉刷新

下拉刷新时小程序中常见的一种刷新方式,当用户下拉页面的时候,页面会自动刷新,以便用户获取最新的内容;

小程序中实现下拉刷新的方式:

  1. 在 app.json 或者 page.json 中开启允许下拉,同时可以配置窗口、loading 样式等;
  2. 在 页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新;

下面打开微信开发者工具来配置一下下拉刷新功能:

  • 在 pages/cate/cate.json 中配置允许下拉:

    yaml 复制代码
    {
      "usingComponents": {},
      "onReachBottomDistance": 100,
      "enablePullDownRefresh": true,
      "backgroundColor": "#efefef",
      "backgroundTextStyle": "light" 
    }

    点击编译,下拉页面,可以看到页面允许下拉,下拉窗口背景颜色为 #efefef,下拉窗口 loading 颜色为 light,如下:

  • 在 pages/cate/cate.js 中定义一个下拉刷新事件处理函数,如下所示:

    javascript 复制代码
      // 监听用户下拉刷新
      onPullDownRefresh(){
        console.log("监听用户下拉刷新")
      }
    })

    点击编译,下拉页面,可以看到 Console 区域打印了对应的信息,如下所示:

结合上一节(小程序API ------ 55页面处理函数 -上拉加载)内容,实现下面的需求:当用户上拉加载更多以后,如果用户进行下拉刷新,需要将数据重置:

  • 在 pages/cate/cate.js 中添加对应的刷新逻辑,如下所示:

    javascript 复制代码
      // 监听用户下拉刷新
      onPullDownRefresh(){
        // console.log("监听用户下拉刷新")
    
        // 当用户上拉加载更多以后,如果用户进行了下拉刷新,需要将数据进行重置
        this.setData({
          numList: [1, 2, 3]
        })
    
        // 下拉刷新以后,loading 效果有可能不会弹回去
        if(this.data.numList.length === 3){
          wx.stopPullDownRefresh()
        }
      }
  • 点击编译,先下拉页面更新当前展示数据,然后刷新页面,可以看到当前数字重新变为 [1, 2, 3],如下所示:

参考视频:尚硅谷微信小程序开发教程

相关推荐
说私域4 小时前
颠覆传统微商!开源AI智能名片链动2+1模式S2B2C商城小程序:重构社交电商的“降维打击”革命
人工智能·小程序·开源·零售
ai大佬5 小时前
我是如何用AI编程制作一个AI表情包生成的小程序
人工智能·小程序·ai编程·api中转·apikey
Maitians6 小时前
微信小程序 - 根据经纬度打开导航
微信小程序·小程序
xuanjiong8 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
天_真好16 小时前
小程序知识点总结1
小程序
gurenchang16 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设19 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°1 天前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
yuanmenglxb20041 天前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设1 天前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序