微信小程序 - 返回上一页并刷新页面（重新执行onLoad内函数达到刷新）

梦里梦外; 2023-03-06 05:41 28阅读 0赞

## 前言 ##

> 当然，是自定义的顶部导航栏，非官方。

这个需求很常见，比如 **当付款完成后需要返回查看订单列表，此时数据必须是 `新数据`，而不是 `旧数据`。** 因此需要在返回后，页面及时反馈出操作后的结果列表。

## 效果图 ##

这是项目中的效果（不是本篇博客的demo效果），但是大概就是这个意思。  
![在这里插入图片描述][20200805192502266.gif]

## 实现过程 ##

> 整体思路是，先获取当前页面栈（用小程序[API][]），然后找到上一页的页面栈（跳转前执行 `onLoad` 刷新数据），最后完成上一页跳转。

// 1.获取页面栈(返回一个数组,包含了所有曾经去过的页面)
    var pages = getCurrentPages();//可以log看看是什么(里面什么都有--)
    
    // 2. 拿到上一页(数组长度-2就是上一页)
    var beforePage = pages[pages.length - 2];
    
    // 3. 执行上一页 onLoad 函数(刷新数据)
    // 假设请求后端数据并渲染页面的函数是: getNavGird()
    beforePage.getNavGird()
    
    // 4. 跳转页面()
    wx.reLaunch({ 
        // 注意：pages对象中可以获取路径(动态需求时)
        url: '/pages/index/index',
    });

## 写在后面 ##

建议在列表页的 `onLoad` 函数中，**将数据请求单独放在一个函数中进行调用**。

比如这里的 `getNavGird()`，这样在 `create` 页面就能只刷新数据，而 `onLoad` 中可能存在的，比如获取用户 `id` 等操作，则不会重复再次执行。

[20200805192502266.gif]: /images/20230208/78c59601212c4e01aa80768a36c42958.png
[API]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关解决微信返回上一页之后，页面不刷新

问题描述: A页面跳转到B页面,在B页面进行了相关的操作之后,返回到A页面,A页面的数据没有刷新.具体实例: 由于项目中使用了vue，使用了gulp和普通的页面跳转。并没有

约定不等于承诺〃/ 2023年06月25日 06:24/ 0 赞/ 30 阅读

相关微信小程序 - 返回上一页并刷新页面（重新执行onLoad内函数达到刷新）

前言 > 当然，是自定义的顶部导航栏，非官方。这个需求很常见，比如当付款完成后需要返回查看订单列表，此时数据必须是 `新数据`，而不是 `旧数据`。因此需要在返回

梦里梦外;/ 2023年03月06日 05:41/ 0 赞/ 29 阅读

相关 uniapp 返回上一页并刷新页面数据

一、page.json文件中配置返回按钮 { "path": "pages/xxx/xxx", "st

小灰灰/ 2023年02月23日 12:04/ 0 赞/ 395 阅读

相关微信小程序返回上一页并重新获取数据

由于小程序没有刷新页面这种东西，就换一个角度来写。方法一使用wx.navigateTo跳转页面后原页面并不会消失，只是隐藏了，小程序的页面生命周期中

布满荆棘的人生/ 2022年11月15日 14:07/ 0 赞/ 425 阅读

相关小程序返回上一页刷新

wx.navigateBack({ success: function() { beforePage.onL

水深无声/ 2022年09月03日 10:27/ 0 赞/ 288 阅读

相关返回上一页并刷新

客户需求：在做注入修改之类的操作时，保存成功后，会到列表页时，会直接跳转到默认查询页面，而无法保留上一次的查询条件。洗完修改保存后，能够直接会到上次的查询页。解决方案：

灰太狼/ 2022年03月16日 03:14/ 0 赞/ 373 阅读

相关小程序关闭当前页面返回上一页面并刷新

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateT

拼搏现实的明天。/ 2022年03月06日 18:48/ 0 赞/ 916 阅读

相关 JavaScript返回上一页后并刷新页面

一、返回上一页并刷新页面： window.location.replace(document.referrer); document.referrer：可以引用

爱被打了一巴掌/ 2021年11月16日 22:40/ 0 赞/ 477 阅读

相关微信小程序（三）：返回上一级页面并刷新（页面栈）

在很多业务场景之下，需要返回上一级页面，并进行刷新，在微信小程序中的wx.navigateBack方法中，返回上一页是不会刷新的。如果上一页的页面加载是在onLoad方法中触发

àì夳堔傛蜴生んèń/ 2021年10月13日 20:16/ 0 赞/ 1411 阅读

相关页面返回上一页并刷新

一、返回上一页并刷新 <a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷

淩亂°似流年/ 2021年07月25日 01:56/ 0 赞/ 599 阅读