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

梦里梦外; 2023-03-06 05:41 1阅读 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 条评论，1人围观）

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

相关阅读