uniapp 返回上一页并刷新页面数据-蒲公英云

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

小灰灰 2023-02-23 12:04 447阅读 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方法
                            },
                    });
                }
            },