微信小程序tabBar 返回tabBar不刷新页面


Posted in Javascript onJuly 25, 2019

1、在一个项目中,遇到了这个场景:返回tabBar中的某个页面是需要保存数据,但是新进这个页面需要清除数据。

2、场景如下图:报修进入下一步,返回第一步时不能刷新页面(即保留页面数据),从其他tabBar进入报修页面时就需要清空可能已经填写的数据。

微信小程序tabBar 返回tabBar不刷新页面

微信小程序tabBar 返回tabBar不刷新页面

3、解决办法,在第二步页面做了一个本地存储变量,在第一步的页面判断这个变量进而确定是否是第二步页面返回。

其中,因为第一步有上传图片的操作,也会执行"onShow",因此在当前页面又新增了一个变量去判断onShow是否是上传图片引起的。

第二步页面代码:

onShow: function () {
  wx.setStorageSync('repair',1)
 },

第一步页面代码:注:temp在声明的时候是0,这个变量是在上传图片成功后置为了1

onShow: function () {
  let value = wx.getStorageSync('repair');
  var _tmp = this.data.temp;
  //返回的时候不清空数据
  if (!value){
   //清空数据
   this.setData({
    data:""
   })

  }
 },
onHide: function () {
  if(this.data.temp){
   wx.setStorageSync('repair', 1);
  }else{
   wx.removeStorageSync("repair");
  } 
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js表头排序实现方法
Jan 16 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
关于vue面试题汇总
Mar 20 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
微信小程序实现左滑动删除效果
Mar 30 #Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
小程序实现左滑删除效果
Jul 25 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
详解vue路由
2020/08/05 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python提取内容关键词的方法
2015/03/16 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python中property属性实例解析
2018/02/10 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
介绍一下#error预处理
2015/09/25 面试题
创业计划书撰写原则
2014/01/25 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python