微信小程序 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数组长度问题代码说明
Jan 20 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JavaScript利用html5新方法操作元素类名详解
Nov 27 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 SQL之where语句生成器
2009/03/24 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python删除过期log文件操作实例解析
2018/01/31 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python实现视频读取和转化图片
2019/12/10 Python
python 日志 logging模块详细解析
2020/03/31 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
银行领导证婚词
2014/01/11 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
新春联欢会主持词
2014/03/24 职场文书
安全环保标语
2014/06/09 职场文书
档案工作汇报材料
2014/08/21 职场文书
《青山不老》教学反思
2016/02/22 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP