微信小程序下拉刷新界面的实现
微信小程序下拉刷新界面的实现
利用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();//在标题栏中显示加载图标
leturl=app.globalConfig.pre_api+"/api/user/getUserInfo.php";//根据实际情况定义请求的路径
letuser_id=app.globalData.user_id;//请求的参数
letflag=true;
letthat=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();//停止下拉刷新
}
})
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！