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

 更新时间:2017年09月28日 11:46:19   投稿:lqh  
这篇文章主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下

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

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

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

相关文章

  • JS前端宏任务微任务及Event Loop使用详解

    JS前端宏任务微任务及Event Loop使用详解

    这篇文章主要为大家介绍了JS前端宏任务微任务及Event Loop使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序教程之本地图片上传(leancloud)实例详解

    这篇文章主要介绍了微信小程序教程之本地图片上传(leancloud)实例详解的相关资料,这里举例说明该如何实现和实例代码,文章一一表述,需要的朋友可以参考下
    2016-11-11
  • 本地存储localStorage设置过期时间示例详解

    本地存储localStorage设置过期时间示例详解

    这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 浅谈js中的宏任务和微任务

    浅谈js中的宏任务和微任务

    这篇文章我们主要谈一谈js中的宏任务和微任务,JavaScript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行,下面我们就来简单谈谈JavaScript吧,需要的朋友可以参考下面文章内容的具体内容
    2021-09-09
  • 微信小程序 底部导航栏目开发资料

    微信小程序 底部导航栏目开发资料

    这篇文章主要介绍了微信小程序 底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下
    2016-12-12
  • 常用的JavaScript数组方法

    常用的JavaScript数组方法

    一说到JavaScript的数组,大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等,今天小编就给大家分享几个开发中常用的js数组方法即他们的用法。需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应详解

    这篇文章主要介绍了微信小程序 图片宽高自适应的相关资料,需要的朋友可以参考下
    2017-05-05
  • html下载本地

    html下载本地

    html下载本地...
    2006-06-06
  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例

    这篇文章主要介绍了微信小程序网络请求wx.request详解及实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • JS实现页面炫酷的时钟特效示例

    JS实现页面炫酷的时钟特效示例

    这篇文章主要为大家介绍了JS实现页面炫酷的时钟特效示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论