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

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

微信开放文档下拉刷新

1. 开始刷新

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

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

 wx.stopPullDownRefresh({
   
   })

        

          
        
        
        

          

          AI 代码解读
        
      
      

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('失败')
  })

},

        

          
        
        
        

          

          AI 代码解读
        
      
      

3.结束刷新

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

4.下拉刷新监听

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

5.下拉刷新的样式设计

代码写在这里

代码实现

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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