微信小程序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 相关文章推荐
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
js实现3D图片展示效果
Mar 09 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
JS实现随机点名器
Apr 12 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
微信小程序与公众号实现数据互通的方法
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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
python 统计代码行数简单实例
2017/05/04 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
初中女生自我鉴定
2013/12/19 职场文书
干部下基层实施方案
2014/03/14 职场文书
竞赛口号大全
2014/06/16 职场文书
周一问候语大全
2015/11/10 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Golang中异常处理机制详解
2021/06/08 Golang