微信小程序 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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
javascript常用代码段搜集
Dec 04 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue-router传参用法详解
Jan 19 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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 全文搜索和替换的实现代码
2008/07/29 PHP
给Function做的OOP扩展
2009/05/07 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
初中生物教学反思
2014/01/10 职场文书
标准单位租车协议书
2014/09/23 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python