微信小程序下拉刷新界面的實現(xiàn)

利用onPullDownRefresh函數(shù)設(shè)置下拉刷新功能

一、在app.json中，將window選項中的enablePullDownRefresh設(shè)為true

"window":{    "enablePullDownRefresh":true } 

      或者在要刷新的界面的XXX.json中設(shè)置enablePullDownRefresh設(shè)為true  

{   "enablePullDownRefresh": true } 

二、利用onPullDownRefresh函數(shù)定義下拉動作并結(jié)合wx.request()向后臺請求數(shù)據(jù)更新

// 下拉刷新 onPullDownRefresh:function(){  // 動態(tài)設(shè)置導(dǎo)航條標(biāo)題  wx.setNavigationBarTitle({   title: ''  });  wx.showNavigationBarLoading(); //在標(biāo)題欄中顯示加載圖標(biāo)   let url = app.globalConfig.pre_api + "/api/user/getUserInfo.php";//根據(jù)實際情況定義請求的路徑  let user_id = app.globalData.user_id;              //請求的參數(shù)  let flag = true;  let that = this;  // 驗證參數(shù)合法性  flag = app.isParameterdValidate(user_id,'該用戶不存在');  if(flag == false){ return; }  // 發(fā)送請求  wx.request({   url: url,   data: {    user_id: user_id,   },   method: 'POST', 

 //請求成功的函數(shù)處理  success: function (res) {   app.globalData.balance = res.data.data.balance;  //對數(shù)據(jù)進(jìn)行更新   that.setData({    balance: app.globalData.balance,   });  },  fail: function (res) {               //請求失敗的處理   console.log(res.data.msg);  },  complete: function () {   wx.hideNavigationBarLoading();          //完成停止加載   // 動態(tài)設(shè)置導(dǎo)航條標(biāo)題   wx.setNavigationBarTitle({    title: '我的'   });   wx.stopPullDownRefresh();            //停止下拉刷新  } }) 

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！