onNavigationBarButtonTap 监听原生标题栏按钮点击事件

最新推荐文章于 2024-06-18 09:45:45 发布

cy玩具

最新推荐文章于 2024-06-18 09:45:45 发布

阅读量5.4k

点赞数 3

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_45500519/article/details/126335995

版权

{
            "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方法
							},
					});
			    }
			},