微信小程序 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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
用javascript获取textarea中的光标位置
2008/05/06 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
js实现中文实时时钟
2020/01/15 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python相似模块用例
2016/03/04 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python怎么对数字进行过滤
2020/07/05 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
大学校运会广播稿
2014/02/03 职场文书
医院院务公开实施方案
2014/05/03 职场文书
亚运会口号
2014/06/20 职场文书
公务员检讨书
2014/11/01 职场文书
技能培训通讯稿
2015/07/18 职场文书