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

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

微信开放文档下拉刷新

1. 开始刷新

wx.startPullDownRefresh()
代码实现（在onLoad中写开始刷新）

onLoad: function (options) {
    
    
    //刷新
    wx.startPullDownRefresh()
    }

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()方法来实现下拉刷新的功能。
**

大家可以关注我的公众号，里面有更多的小程序项目

**