526互联

uni-app中webView下自定义导航

发布时间 2023-07-12 17:01:59作者: 伟衙内

参考博客：  https://dandelioncloud.cn/article/details/1609872435337969666

      https://blog.csdn.net/endianzhijia/article/details/87883346

 

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

  如上图所示，添加了web-view，但是需要自定义导航，点击按钮跳转到对应页面。

  上述博客介绍了两种方法，不做赘述，仅代码记录，以后续参考。

第一种配置化

page.json中配置如下，

{
    "path": "pages/greencenter/eCar",
        "style": {
            "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                    // "navigationStyle": "custom"
                    "app-plus": {
                        "titleNView": {
                            "buttons": [ //原生标题栏按钮配置,
                                // {
                                // 	"type": "back", //这就是  1 部分的返回按钮 
                                // 	"float": "left", //这个我相信大家都能看懂吧。
                                // 	"fontSize": "20px"
                                // },
                                {
                                    "type": "close", //这是 2部分的三个菜单点点
                                    "float": "right"
                                    // "fontSize": "20px"
                                }
                            ]
                        }
                    }
        }

}

页面监听自定义的按钮，

onNavigationBarButtonTap(e) {
    if (e.type == 'close') {
        uni.switchTab({
            url: '/pages/greencenter/index'
        })
        //点击菜单按钮执行的代码
    } else {
        //点击返回按钮执行的代码
    }

},

第二种代码配置

 在pages/greencenter/eCar页面中直接在OnLoad中添加如下代码，

// #ifdef APP-PLUS
 const pages = getCurrentPages()
 const page = pages[pages.length - 1];
 const currentWebview = page.$getAppWebview()
 currentWebview.setStyle({
 	titleNView: {
 		buttons: [{
 			float: 'right',
 			type: 'close',
 			onclick: function() {
 				uni.switchTab({
 					url:'/pages/greencenter/index'
 				})
 			}
 		}]
 	}
 })
// #endif

 

  如下所示，左边是进入web-view的自带的回退按钮，一级级退出页面。

  右边是自定义按钮，直接跳转到/pages/greencenter/index这个tab。