千家信息网

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

发表于:2024-10-19 作者:千家信息网编辑
千家信息网最后更新 2024年10月19日,这篇文章主要介绍"微信小程序怎么实现下拉刷新界面"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"微信小程序怎么实现下拉刷新界面"文章能帮助大家解决问题。微信小程
千家信息网最后更新 2024年10月19日微信小程序怎么实现下拉刷新界面

这篇文章主要介绍"微信小程序怎么实现下拉刷新界面"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"微信小程序怎么实现下拉刷新界面"文章能帮助大家解决问题。

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

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

关于"微信小程序怎么实现下拉刷新界面"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注行业资讯频道,小编每天都会为大家更新不同的知识点。

0