微信小程序下拉刷新界面

利用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();                       //停止下拉刷新
      }
    })
  },    



你可能感兴趣的:(微信小程序)