uni-app中webView下自定义导航
参考博客: 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。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」