微信小程序 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 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
Element-UI+Vue模式使用总结
Jan 02 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 字符转义 注意事项
2009/05/27 PHP
php生成excel文件的简单方法
2014/02/08 PHP
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
python多线程http下载实现示例
2013/12/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python文件处理
2016/02/29 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python中按键来获取指定的值
2019/03/02 Python
详细分析Python垃圾回收机制
2020/07/01 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
2014的自我评价
2014/01/13 职场文书
给校长的建议书
2014/03/12 职场文书
本科毕业生自荐信
2014/05/26 职场文书
银行进社区活动总结
2014/07/07 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
个人租房协议书范本
2014/09/30 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
读后感作文评语
2014/12/25 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书