当前位置: 首页 > news >正文

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

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

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

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

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

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

    {
      "usingComponents": {},
      "onReachBottomDistance": 100,
      "enablePullDownRefresh": true,
      "backgroundColor": "#efefef",
      "backgroundTextStyle": "light" 
    }
    

    点击编译,下拉页面,可以看到页面允许下拉,下拉窗口背景颜色为 #efefef,下拉窗口 loading 颜色为 light,如下:
    在这里插入图片描述

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

      // 监听用户下拉刷新
      onPullDownRefresh(){
        console.log("监听用户下拉刷新")
      }
    })
    

    点击编译,下拉页面,可以看到 Console 区域打印了对应的信息,如下所示:
    在这里插入图片描述

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

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

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

    在这里插入图片描述

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

http://www.dtcms.com/a/98758.html

相关文章:

  • 前端常问的宏观“大”问题详解(二)
  • 编译原理课设工作日志
  • 一些练习 C 语言的小游戏
  • 探索Scala基础:融合函数式与面向对象编程的强大语言
  • 在 Unreal Engine 5 中制作类似《鬼泣5》这样的游戏时,角色在空中无法落地的问题可能由多种原因引起。
  • C++作用域辨识详解
  • 高等数学-第七版-上册 选做记录 习题7-4
  • linux基本命令(1)--linux下的打包命令 -- tar 和gzip
  • 电子电气架构 --- 域控架构下,汽车连接器的挑战和变化
  • Ethernet/IP转Modbus剖析库卡机器人同S7-1200PLC双向通讯的技术
  • OpenAI API - Realtime 实时
  • 高速电路中的存储器应用与设计四
  • 【JavaScript】合体期功法——DOM(一)
  • Python 序列构成的数组(元组不仅仅是不可变的列表)
  • 质因数个数--欧拉函数中统计纯素数
  • 直播推流全面指南
  • 【设计模式】单例模式
  • 安卓分发平台一站式APP应用内测平台
  • ros2--功能包
  • 如何备份你的 Postman 所有 Collection?
  • 0329-项目(添加 删除 修改)
  • Java内存中的Heap(堆)的作用
  • <背包问题>
  • Java多线程:(2)通过实现Runnable接口创建线程
  • shell脚本--MySQL简单调用
  • 求阶乘--二分答案+0结尾与5有关
  • 日报日报流量分析
  • langchain框架,ollama调用deepseek r1 实现RAG问答
  • 软件架构设计中的软件过程模型初识
  • Postman 7.3.5 旧版下载指南(Win64)及注意事项