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


Posted in Javascript onSeptember 28, 2017

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

利用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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
详解Vuex中mapState的具体用法
Sep 28 #Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 #Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 #Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 #Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 #Javascript
angular4自定义组件详解
Sep 28 #Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 #Javascript
You might like
sphinx增量索引的一个问题
2011/06/14 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python访问系统环境变量的方法
2015/04/29 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
实例讲解Python爬取网页数据
2018/07/08 Python
对python模块中多个类的用法详解
2019/01/10 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
用python制作个视频下载器
2021/02/01 Python
J2EE中常用的名词进行解释
2015/11/09 面试题
致标枪运动员广播稿
2014/02/06 职场文书
简单的项目建议书模板
2014/03/12 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
团日活动总结格式
2015/05/11 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python