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

原创已于 2022-04-16 10:50:08 修改 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2022-04-16 10:49:27 首次发布

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

场景如下：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;
     } 
  },