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

小灰灰 2023-02-23 12:04 335阅读 0赞

**一、page.json文件中配置返回按钮**

{
                "path": "pages/xxx/xxx",
                "style": {
                    "navigationBarTitleText": "礼品上交",
                    "app-plus": {
                        "titleNView": {
                            "buttons": [{
                                "text": "返回",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "16px",
                                "color": "#000000",
                                "float": "left"
                            }]
                        }
                    }
                }
            }

`注意：`  
**1 . 建议uni-app中单位全部用px，很多动态解析的upx会无效，出现很多隐形的问题，而使用px单位，静态hbuilder可以设置自动转换upx。**

`切记：APP修改了pages.json文件一定要重启，否则看不到效果！`

**二、 vue页面中监听导航栏自定义返回按钮事件 `onNavigationBarButtonTap`**

在uniapp 中 **getCurrentPages()** 方法获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面.。  
**let page = pages\[pages.length - 1\];获取的即为当前页面栈**，在当前页面栈 中从新**调用onLoad 页面生命周期，即可刷新当前页**，**let page = pages\[pages.length - 2\]; 即为上一页。**

onNavigationBarButtonTap(e) {
    			    const index = e.index;
    			    if (index === 0) {
    					let pages = getCurrentPages(); // 当前页面
    					let beforePage = pages[pages.length - 2]; // 前一个页面
    					uni.navigateBack({
    						success: function() {
    							beforePage.onLoad(); // 执行前一个页面的onLoad方法
    							},
    					});
    			    }
    			},