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

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

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

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

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

"window":{

"enablePullDownRefresh":true

}

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

{

"enablePullDownRefresh": true

}

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

// 下拉刷新

onPullDownRefresh:function(){

// 动态设置导航条标题

wx.setNavigationBarTitle({

title: ''

});

wx.showNavigationBarLoVyQqueTFwading(); //在标题栏中显示加载图标

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) { VyQqueTFw //请求失败的处理

console.log(res.data.msg);

},

complete: function () {

wx.hideNavigationBarLoading(); //完成停止加载

// 动态设置导航条标题

wx.setNavigationBarTitle({

title: '我的'

});

wx.stopPullDownRefresh(); //停止下拉刷新

}

})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。