微信小程序下拉刷新界面的实现

微信小程序下拉刷新界面的实现

利用onPullDownRefresh函数设置下拉刷新功能

一、在app.json中，将window选项中的enablePullDownRefresh设为true

"window":{    "enablePullDownRefresh":true } 

      或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true  

{   "enablePullDownRefresh": true } 

二、利用onPullDownRefresh函数定义下拉动作并结合wx.request()向后台请求数据更新

// 下拉刷新 onPullDownRefresh:function(){  // 动态设置导航条标题  wx.setNavigationBarTitle({   title: ''  });  wx.showNavigationBarLoading(); //在标题栏中显示加载图标   let url = app.globalConfig.pre_api + "/api/user/getUserInfo.php";//根据实际情况定义请求的路径  let user_id = app.globalData.user_id;              //请求的参数  let flag = true;  let that = this;  // 验证参数合法性  flag = app.isParameterdValidate(user_id,'该用户不存在');  if(flag == false){ return; }  // 发送请求  wx.request({   url: url,   data: {    user_id: user_id,   },   method: 'POST', 

 //请求成功的函数处理  success: function (res) {   app.globalData.balance = res.data.data.balance;  //对数据进行更新   that.setData({    balance: app.globalData.balance,   });  },  fail: function (res) {               //请求失败的处理   console.log(res.data.msg);  },  complete: function () {   wx.hideNavigationBarLoading();          //完成停止加载   // 动态设置导航条标题   wx.setNavigationBarTitle({    title: '我的'   });   wx.stopPullDownRefresh();            //停止下拉刷新  } }) 

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！