微信小程序返回上一页刷新组件数据的实现方案

作者:开源拾贝

时间:2026-10-31

浏览:541

本文介绍微信小程序中从子页面返回父页面时刷新组件数据的两种方案。第一种通过父页面onShow/onHide设置标志位并传递给子组件,利用properties监听触发刷新;第二种通过Taro获取页面栈,直接调用上一页自定义方法。文章包含完整代码示例及生命周期说明,帮助开发者实现页面间数据同步。

文章目录

微信小程序返回上一页刷新组件数据的示例代码

在父页面的onShow和onHide生命周期钩子中设置一个状态标志。

onShow() {
        this.setData({
          show:true
      })
    },
    onHide() {
      this.setData({
        show:false
    })
    },

将该状态值作为属性传递给子组件。

<importantList slot="importantConcern" flag="{{barSelect}}" flag2="{{show}}" />

在子组件的properties定义中监听该标志,当flag2为true时调用刷新函数以更新数据。

 properties: {
    flag: {
      type: String,
      observer: function(news) {
       if(news==='importantConcern'){
         this.getnewTablist(this.data.code)
       }
      }
    },
    flag2: {
      type: String,
      observer: function(news) {
       if(news==='true'&&news==='importantConcern'){
         this.getnewTablist(this.data.code)
       }
      }
    },
  },

补充:

微信小程序返回上一级页面并自动刷新数据

前言

界面由A跳转到B,再由B返回A时,触发刷新动作。

一、获取小程序栈

界面A代码

 shuaxin(){
   //此处可进行接口请求从而实现更新数据的效果
   console.log("刷新本页面数据啦")
 },

界面B代码

// 返回触发事件上
// Taro代码为例
goBack(){
    let pages = Taro.getCurrentPages();   //获取小程序页面栈
    let beforePage = pages[pages.length -2];  //获取上个页面的实例对象
    beforePage.shuaxin();   //触发上个页面自定义的shuaxin方法
    wx.navigateBack({         //返回上一页  
      delta:1
    })
},

二、生命周期触发

代码如下(示例):

componentDidShow (){}

在小程序环境中对应页面的 onShow。

页面显示/切入前台时触发。

总结

Taro React生命周期函数

到此这篇关于微信小程序返回上一页刷新组件数据的文章就介绍到这了,更多相关微信小程序返回上一页刷新组件数据内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章