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


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 类与静态类的实现(续)
Apr 02 Javascript
jQuery select操作控制方法小结
May 26 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
详解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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python中的is和id用法分析
2015/01/26 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
小区门卫值班制度
2014/01/24 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android