feat: webview 的导航栏样式处理

This commit is contained in:
2026-02-04 14:33:35 +08:00
parent 8e27c27abf
commit 2da15786c8
2 changed files with 13 additions and 34 deletions

View File

@@ -23,6 +23,15 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/webview/index",
"style": {
"navigationStyle": "custom",
"backgroundColor": "#FFFFFF",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
}
}
],
"subPackages": [

View File

@@ -1,26 +1,14 @@
<template>
<view class="webview">
<!-- 使用 NavBar 组件 -->
<TopNavBar title="网页浏览" @back="goBack" />
<!-- WebView 内容区域 -->
<view class="webview-content">
<web-view :src="webviewUrl"></web-view>
</view>
<view>
<web-view :src="webviewUrl"></web-view>
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
const webviewUrl = ref("");
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
onMounted(() => {
// 获取页面参数
const pages = getCurrentPages();
@@ -35,22 +23,4 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.webview {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background-color: #fff;
}
.webview-content {
flex: 1;
margin-top: calc(44px + var(--status-bar-height));
}
.webview-content {
width: 100%;
height: 100%;
}
</style>
<style lang="scss" scoped></style>