微信小程序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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 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基础学习之变量的使用
2011/06/09 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript 写类方式之九
2009/07/05 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
Vue.js实现分页查询功能
2020/11/15 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python生成密码字典的方法
2018/07/06 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python datetime包函数简单介绍
2019/08/28 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
数据库基础的一些面试题
2012/02/25 面试题
大学毕业生简单自荐信
2013/11/05 职场文书
新学期家长寄语
2014/01/19 职场文书
三万活动总结
2014/04/28 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书