微信小程序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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
JS实现图片切换效果
Nov 17 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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+mysql一个名片库程序
2006/10/09 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
深入PHP curl参数的详解
2013/06/17 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
jquery 循环显示div的示例代码
2013/10/18 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python3解释器知识点总结
2019/02/19 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Ref与out有什么不同
2012/11/24 面试题
2014年乡镇安全生产工作总结
2014/12/02 职场文书
大学生求职信怎么写
2015/03/19 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL