微信小程序 Tab页切换更新数据


Posted in Javascript onJanuary 05, 2017

微信小程序 Tab页切换更新数据

微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:з?∠)_

功能需求如下:

我在首页点击“5万以上”他会把跳转到买车页然后同时把“5万以上”这个筛选条件带到买车页。

微信小程序 Tab页切换更新数据

之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据

那么如果还想要实现我们的效果只能用别的方法了

想了一下有两种思路

1、用数据缓存

2、用全局变量存储globalData

最终我用的是全局变量,原因是我先尝试数据缓存的时候用的onLoad,onLoad用于页面加载,就是说只有第一次打开这个页面他才会执行,之后不会再执行,也就第一次实现了效果之后都不会在做这个动作。当我尝试局部变量的时候一开始也用的onLoad当然也没实现然后我发现了onShow,onShow是每次显示这个页面的时候都执行操作成功的完成了效果,我没再试缓存但应该也是可以实现的

具体的实现:

1、首先需要在app.js里定义需要的全局变量

globalData:{
  currentLocation:'北京',
  selectCondition:'',
  userInfo:null
 }

globalData里除了userInfo是小程序自带的另两个变量都是我定义的

2、在“首页”里点击“5万以上”之后做两个操作

一是修改全局变量selectCondition的值

二是跳转到买车页

需要在首页的.js里写:

微信小程序 Tab页切换更新数据

var app=getApp();

然后在“5万以上”的点击事件里修改全局变量selectCodition的值

addSelectCondition:function(e){
    var con=e.currentTarget.dataset.hi;
    app.globalData.selectCondition=con;
    console.log(app.globalData.selectCondition)
    wx.switchTab({
     url: '../buycar/pickcar'
    })
  }

这是整个function的内容,console之前就是修改全局变量的值

之后就是跳转到“买车”tab页的代码,用了wx.switchTab

3、在买车页的onShow函数里得到全局变量selectCondition并且赋值给我们data里早就定义好的变量,这样就可以在“买车”里调用这个“5万以上”的值了

微信小程序 Tab页切换更新数据

成功,撒花

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 #Javascript
微信小程序 Template详解及简单实例
Jan 05 #Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 #Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 #Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 #Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript 写类方式之六
2009/07/05 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
2014年度思想工作总结
2014/11/27 职场文书
新生入学欢迎词
2015/01/26 职场文书
毕业生入职感言
2015/07/31 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers