微信小程序下拉刷新界面

来源:互联网 发布:大数据软件开发 编辑:程序博客网 时间:2024/05/14 20:43

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