一分钟教你学会微信小程序的页面刷新

简介: 本文指导如何在微信小程序中实现页面刷新功能。首先,在页面JSON配置开启刷新,然后在JS的`onPullDownRefresh`方法中重置数据并调用数据加载函数。在数据请求方法中,使用`wx.showLoading`显示加载提示,请求完成后用`wx.stopPullDownRefresh`结束刷新并更新数据。监听`onPullDownRefresh`事件触发数据获取。最后,自定义下拉刷新样式,并总结关键在于使用`wx.startPullDownRefresh`启动和`wx.stopPullDownRefresh`停止刷新。

一分钟教你学会微信小程序的页面刷新

微信开放文档下拉刷新

1. 开始刷新

1.在页面的json文件中设置是否开启刷新
image.png

2.页面的js中的onPullDownRefresh方法中

// 监听用户的下拉刷新
onPullDownRefresh(){
   
   
  // 1.重置数组
  this.setData({
   
   
    list1:[],
    list2:[],
    list3:[]
  })
  //2.重置页码
  // this.QueryParams.pagenum=1
  // 3.加载数据
    this.getlunbao();
    this.getteam();
    this.getfanzhi();
    this.getAdmin();
},

3.在获取请求的方法中关闭页面加载

 wx.stopPullDownRefresh({
   
   })

2.刷新界面的提示

在请求数据库的方法中加入这个提示

getShop(){
   
    //构造的请求数据库的方法
  wx.showLoading({
   
   
    title: '加载中....',
  })
    //请求数据库
  wx.cloud.database().collection('electric')
  .get()
  .then(res=>{
   
   
    wx.hideLoading()
    //停止数据刷新
    wx.stopPullDownRefresh()
    this.setData({
   
   
      list:res.data
    })
  })
  .catch(res=>{
   
   
    console.log('失败')
  })

},

3.结束刷新

wx.stopPullDownRefresh()
在数据库请求到数据后开始隐藏刷新提示,并且结束刷新。

 .then(res=>{
   
   
    wx.hideLoading()
    //停止数据刷新
    wx.stopPullDownRefresh()
    this.setData({
   
   
      list:res.data
    })
  })

4.下拉刷新监听

onPullDownRefresh: function () {
   
   
  this.getShop()//请求数据库的方法
  this.getShiwu()
},

5.下拉刷新的样式设计

代码写在这里
在这里插入图片描述
代码实现

{
   
   
  "usingComponents": {
   
   },
  "enablePullDownRefresh": true,
  "backgroundColor": "#d3d3d3"
}

6.总结
下拉刷新主要是调用API接口,通过wx.startPullDownRefresh()和wx.stopPullDownRefresh()方法来实现下拉刷新的功能。
**

目录
相关文章
|
1月前
|
小程序 API
uniapp、微信小程序返回上页面刷新数据
uniapp、微信小程序返回上页面刷新数据
115 0
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
23天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
43 5
|
10天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
14 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
29 8
|
19天前
|
JavaScript Java 测试技术
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
27 1
|
20天前
|
JavaScript Java 测试技术
“村游网”系统的微信小程序开发ssm附带文章和源代码设计说明文档ppt
“村游网”系统的微信小程序开发ssm附带文章和源代码设计说明文档ppt
22 0
|
20天前
|
JavaScript Java 测试技术
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
26 0

热门文章

最新文章