微信小程序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 相关文章推荐
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
js实现图片放大展示效果
Aug 30 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
VUE动态生成word的实现
Jul 26 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
基于树莓派的语音对话机器人
2019/06/17 Python
谈谈python垃圾回收机制
2020/09/27 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
《少年王勃》教学反思
2014/04/27 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
领导干部考核评语
2015/01/04 职场文书
中英文求职信范文
2015/03/19 职场文书
部分武汉产收音机展览
2022/04/07 无线电
Python简易开发之制作计算器
2022/04/28 Python