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

简介: 本文指导如何在微信小程序中实现页面刷新功能。首先,在页面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、微信小程序返回上页面刷新数据
135 0
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
13 3
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
22 4
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信小程序线上教育商城的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序线上教育商城的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的中国剪纸微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的中国剪纸微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的教育培训微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的教育培训微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)