微信小程序在返回上个页面时,刷新前上页数据

在B页面中进行操作的时候就在后台刷新A页面,当返回A页面的时候就不需要再刷新加载A页面了:

具体步骤分为两步:

(1)。在父页面中添加刷新数据的方法:

changeData:function(){
    this.onLoad();//最好是只写需要刷新的区域的代码,onload也可,效率低,有点low
}

(2)。在子页面中添加方法:并且在需要的地方进行调用(如success方法中setData之后调用that.changeParentData();

changeParentData: function () {
    var pages =getCurrentPages();//当前页面栈
    if (pages.length >1) {
        var beforePage = pages[pages.length- 2];//获取上一个页面实例对象
        beforePage.changeData();//触发父页面中的方法
    }
}

 

微信小程序返回刷新页面数据有多种实现方法: - **使用`wx.redirectTo`**:可以实现刷新页面,且不会造成页面闪一下的效果,用户体验较好,但返回页面刷新后,点击返回上一会回到没刷新的当页面,需根据业务场景试验调整。例如一开始使用该方式实现微信小程序提交数据返回上一并且刷新数据 [^1]。 - **Uniapp实现方式**:在B页面获取页面数据,当页面栈长度小于等于1,使用`uni.switchTab`跳转到指定页面;若长度大于等于2,获取上一信息和完整路由,使用`setTimeout`降低返回调用刷新函数失败几率,再使用`uni.navigateBack`返回上一并触发上一刷新方法,同判断是否为刷新数据的目标,若是则调用上一刷新函数 [^2]。 ```javascript // B页面 const pages = getCurrentPages() if(pages.length <= 1){ uni.switchTab({ url: '/pages/home/home' }) }else{ let prevPage = '' let prevRoute = '' if(pages.length >= 2){ prevPage = pages[pages.length - 2] prevRoute = prevPage.route } setTimeout(() => { uni.navigateBack({ delta:1, success:(event) => { if(prevRoute.indexOf('page/index/index') > -1){ prevPage.$vm.reLoadFn() } } }); },300) } ``` - **直接修改上个页面数据并触发自定义方法**:在B页面点击操作触发函数,获取小程序页面栈,获取上个页面的实例对象,直接修改上个页面数据(可传递参数),触发上个页面自定义的更新方法,最后使用`wx.navigateBack`返回上一 [^3]。 ```javascript // B页面 function handleClick() { let pages = getCurrentPages(); let beforePage = pages[pages.length - 2]; beforePage.setData({ txt: '修改数据了' }) beforePage.go_update(); wx.navigateBack({ delta: 1 }) } ``` - **子组件根据属性值刷新**:在子组件的`properties`方法里进行判断,当特定属性值满足条件调用刷新函数刷新数据 [^4]。 ```javascript 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监听该自定义事件并执行数据刷新操作 [^5]。 ```javascript // 页面A.vue this.$emit('refreshData', data); // 页面B.vue this.$on('refreshData', (data) => { // 执行数据刷新操作 }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值