微信小程序 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或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
Node.js fs模块原理及常见用途
Oct 22 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&MYSQL服务器配置说明
2006/10/09 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
python多线程扫描端口示例
2014/01/16 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
艺人经纪人岗位职责
2014/04/15 职场文书
会计求职信范文
2014/05/24 职场文书
大四毕业生自荐书
2014/07/05 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
开学典礼致辞
2015/07/29 职场文书