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

 更新时间: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();            //停止下拉刷新 
 } 
}) 

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

相关文章

  • JavaScript利用html5新方法操作元素类名详解

    JavaScript利用html5新方法操作元素类名详解

    这篇文章主要给大家分享的是JavaScript用html5新方法操作元素类名的详解,早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性,非常方便,下面就一起来看看具体操作过程吧
    2021-11-11
  • 微信小程序 轮播图swiper详解及实例(源码下载)

    微信小程序 轮播图swiper详解及实例(源码下载)

    这篇文章主要介绍了微信小程序 轮播图swiper详解及实例(源码下载)的相关资料,实用小技巧自定义轮播图swiper dots默认样式,需要的朋友可以参考下
    2017-01-01
  • Promise改写获取萤石云直播地址接口示例

    Promise改写获取萤石云直播地址接口示例

    这篇文章主要为大家介绍了Promise改写获取萤石云直播地址接口示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 富文本转文本实例详解

    微信小程序 富文本转文本实例详解

    这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 http请求详细介绍

    微信小程序 http请求详细介绍

    这篇文章主要介绍了微信小程序 http请求详细介绍的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序之picker日期和时间选择器

    微信小程序之picker日期和时间选择器

    本篇文章主要介绍了微信小程序之picker选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Selection与Range 对象操作示例指南

    Selection与Range 对象操作示例指南

    这篇文章主要为大家介绍了Selection与Range 对象操作示例指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 新闻内页-JS分页

    新闻内页-JS分页

    新闻内页-JS分页...
    2006-06-06
  • JS高级程序设计之class继承重点详解

    JS高级程序设计之class继承重点详解

    这篇文章主要为大家介绍了JS高级程序设计之class继承重点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JavaScript中Map与Object应用场景

    JavaScript中Map与Object应用场景

    这篇文章主要为大家介绍了JavaScript中Map与Object应用场景的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论