微信小程序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的Theme和Theme Switcher使用小结
Sep 08 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JS实现打砖块游戏
Feb 14 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
vant中的toast轻提示实现代码
Nov 04 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中设置index.php文件为只读的方法
2013/02/06 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
php调整服务器时间的方法
2015/04/03 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JS实现商品倒计时实现代码
2013/05/03 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
面试后感谢信
2014/02/01 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
家长会标语
2014/06/24 职场文书
党员检讨书
2014/10/13 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
元旦晚会开场白
2015/05/29 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js