微信小程序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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Date对象格式化函数代码
2010/07/17 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
js读写json文件实例代码
2014/10/21 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
详解python中@的用法
2019/03/27 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python实现简单井字棋游戏
2020/03/04 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python调用飞书发送消息的示例
2020/11/10 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
集团公司人力资源部岗位职责
2014/01/03 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
暑期家教宣传单
2015/07/14 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python