微信小程序 返回tabBar页面刷新控制

这篇博客介绍了如何利用全局变量(globalData)在微信小程序的tabBar页面间保持数据持久化。在发布页面(publish)中,数据在发布前被保存,发布后通过全局变量判断清空数据。在发布成功页面(publishsuccess)更新全局变量值,确保再次进入发布页面时能够正确重置数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景如下:tabBar中的某个页面是用来发布数据的,发布数据之前在tabBar中各页面切换时该页面(publish)已填数据不会丢失(该页面已填写数据需要保存)。发布数据后进入页面2(publishsuccess),显示发布成功,但是发布数据后再进入该tabBar的发布页面则需要清除数据。

 

实现方法:

1.在全局app.js中设置global变量:

globalData: {
    publish:null,
  },

2.在publishsuccess.js 中改变全局变量publish的值为1

var app = getApp()
onShow: function () {    
    app.globalData.publish= 1;
    console.log("publish:",app.globalData.publish);
  },

3.在publish.js中根据全局变量publish的值来判断是否需要保留已填写数据或清空数据:

var app = getApp()
resetData:function(){
    this.setData({
      topicText:"请选择话题",
      topicId:null,
      imagelist:[],
      address:'',
      content:'',
    })
  },
onShow: function () {
    let value = app.globalData.publish;
    //返回的时候不清空数据
    if (value){
      //清空数据
      this.resetData();
      console.log('publish:',value)
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
    if(this.data.temp){
      app.globalData.publish= 1;
     }else{
      app.globalData.publish= null;
     } 
  },

### 微信小程序自定义 TabBar 切换页面闪烁解决方案 #### 一、原因分析 在微信小程序中,当使用自定义TabBar并进行页面切换时,可能会出现图片闪动现象。这主要是由于每次切换页面都会重新渲染整个TabBar组件,导致其中的图像资源被重新加载,从而引起视觉上的闪烁效果[^2]。 #### 二、具体实现方式 ##### 1. 使用缓存机制优化图片加载 为了防止因频繁请求网络而导致的图片重载问题,可以在本地存储常用图标的Base64编码形式或其他高效的缓存策略来减少不必要的HTTP请求次数: ```javascript // 在globalData.js文件里保存全局变量用于存放已下载过的base64字符串 App({ globalData: { iconCache:{} } }) ``` ##### 2. 调整生命周期函数逻辑 确保只在必要时刻才去刷新TabBar的状态,而不是每次都强制更新。比如可以通过监听`onShow()`事件,在目标页面显示之前主动通知Custom-Tab-Bar组件改变其内部状态而不必完全重建DOM结构: ```json { "pages":[...], "tabBar":{ ... }, "usingComponents": {}, "custom":true, "window":{} } ``` 注意:需保证app.json配置项中的`"custom"`属性设为`true`,以便启用自定义底部导航栏功能[^1]。 另外还需修改各个带有TabBar链接的目标页(`tabPage`)内的js代码如下所示: ```javascript Page({ onShow:function(){ const app=getApp(); this.setData({activeIndex:index}); // index代表当前所处位置编号 } }); ``` 此处通过setData()方法间接告知外部环境自身的最新激活索引值,进而使得Custom-Tab-Bar能够依据此信息同步调整样式表现而无需经历完整的销毁与创建过程[^3]。 ##### 3. 隐藏返回按钮处理 如果仍然存在轻微卡顿感,则考虑采用一种变通手段——即让实际发生跳转操作的是某个不可见的子级界面而非顶级路由本身。这样做的好处是可以利用原生回退手势完成表象上的“即时响应”,同时又不影响整体交互流畅度: ```html <!-- parent.wxml --> <navigator url="/pages/child/child?from=parent"> <!-- tabBar item content here --> </navigator> ``` ```css /* child.wxss */ page{display:none;} ``` 最后记得把子页面顶部默认存在的“<”号去掉即可达成目的[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunidd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值