小程序开发----微信小程序实现下拉刷新功能

微信小程序实现下拉刷新功能

1.json文件配置属性enablePullDownRefresh

　　

   {
　　　　"enablePullDownRefresh": true
　　}    

　　

 

2.js中调用刷新函数

   /**
   * 获取数据
   */
  getlist() {
    //业务逻辑...(省略)
    
    //隐藏loading 提示框
    wx.hideLoading();
    //隐藏导航条加载动画
    wx.hideNavigationBarLoading();
    //停止下拉刷新
    wx.stopPullDownRefresh();
  },

   /**
   * 刷新
   */
  onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    this.getlist();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.onRefresh();
  }

最终结果：