微信小程序如何实现下拉刷新

news/2024/7/19 14:20:56 标签: 小程序, 编程语言, js

我们在进行微信小程序的开发时,经常遇到需要上拉刷新数据的需求。可能大家都不经意间看到过,当新建一个页面的时候,原始JS文件中的生命周期函数里就有实现这个需求的函数。
在这里插入图片描述
但是如果直接在里面写代码的话,根本无法触发这个函数。我当时也很懵逼,但是看过微信小程序开发文档后,我们发现,需要在页面的json文件中配置一下属性enablePullDownRefresh的值为true
在这里插入图片描述
还有很关键的一点是,如果用onPullDownRefresh这个生命周期函数的话,就必须要写wx.stopPullDownRefresh来关掉它,不然它会一直处于下拉的状态。

  onPullDownRefresh: function () {
    wx.showToast({
      title: '下拉加载',
    })
    wx.stopPullDownRefresh({
      success: (res) => {
        
      },
    })
  },

我们来测试一下代码的效果
在这里插入图片描述
这个操作还是很实用的,大部分情况下,我们都是在onLoad请求并处理数据的,所以可以在监听下拉的这个函数里重新调用一次onLoad函数,以此来重新请求一遍数据,达到刷新页面的作用。

有什么问题可以联系QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
在这里插入图片描述


http://www.niftyadmin.cn/n/1576661.html

相关文章

JS内置对象之Math(附代码及演示效果)

JavaScript中有很多的内置对象供我们使用,满足各种各样的业务需求。 这次我们说一下Math对象的各种常量和成员函数。 Math对象主要针对的是关于数学统计和概率方面的业务,有一些常用的要牢记,其它的起码要了解。 常用常量 Math.PI&#xff1a…

SSM开发模板

拿来开发新的项目的时候&#xff0c;可以直接上手使用 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…

proc信息

1、内存 derekubox:~/share/uspace$ cat /proc/meminfo MemTotal: 1016124 kB MemFree: 258380 kB MemAvailable: 684700 kB Buffers: 31520 kB Cached: 518092 kB SwapCached: 0 kB Active: 446536 kB Inactiv…

手把手开始构建java新项目—医疗健康管理系统(一)

手把手开始构建java新项目—医疗健康管理系统&#xff08;一&#xff09; 从基础框架开始构建一个完整的上手项目&#xff0c;熟悉java工作流程&#xff0c;了解目前所使用的框架基本使用。 项目介绍 本项目作为一款应用健康管理机构的业务系统&#xff0c;实现内容可视化、…

Web前端基础练习---闪烁霓虹灯的实现

话不多说&#xff0c;先看效果 源码先来以下~~~~ <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

Openstack-glance镜像服务

Openstack-glance镜像服务教程大纲1. glance的服务组件介绍2. glance的安装部署3. 上传镜像测试1.创建glance的数据库mysql -u root -p -e "create database glance;"mysql -u root -p -e "grant all privileges on glance.* to glancelocalhost identified by …

ElementUI组件的简单使用

ElementUI组件的简单使用 ElementUI是基于VUE2.0的一个桌面端组件&#xff0c;便于使用。使用时直接引入样式和组件库。 官方文档&#xff1a;https://element.eleme.cn/#/zh-CN/component/layout 组件介绍 Container布局容器 <el-container>:外层容器 <el-header&…

微信小程序开发笔记,你收藏了吗?

** 微信小程序开发笔记&#xff0c;你收藏了吗&#xff1f; ** 最近在开发微信小程序&#xff0c;把自己在项目中经常遇到的知识点记录下来&#xff0c;以便下次开发的时候查看。 开发小程序开发工具推荐vscode写代码&#xff0c;微信开发工具用于查看效果和调试。 1、自定义…