小程序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],如下所示:

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

相关推荐
然后就去远行吧3 小时前
小程序API —— 55页面处理函数 -上拉加载
小程序
MaCa .BaKa7 小时前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
万亿少女的梦1687 小时前
场馆预约小程序的设计与实现
小程序
往日情怀酿做酒 V176392963810 小时前
微信小程序逆向开发
微信小程序·小程序
幽络源小助理12 小时前
智能家庭财务管理系统:微信小程序+SSM框架解决方案
微信小程序·小程序
雯0609~12 小时前
微信小程序:解决tabbar切换时,页面不刷新问题
微信小程序·小程序
耶啵奶膘14 小时前
uniapp-小程序地图展示
javascript·小程序·uni-app
说私域1 天前
人工智能赋能美妆零售数字化转型:基于开源AI大模型的S2B2C商城系统构建
人工智能·小程序·开源·零售
说私域1 天前
数智化时代下开源AI大模型驱动的新型商业生态构建——基于AI智能名片与S2B2C商城小程序的融合创新研究
人工智能·小程序·开源
黑马源码库miui520861 天前
心理咨询法律咨询预约咨询微信小程序系统源码独立部署
微信小程序·小程序·uni-app·php·微信公众平台