微信小程序 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来定义类的规范小结
Nov 19 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 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编写PDF文档生成器
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
《长相思》听课反思
2014/04/10 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis