57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
||
<view class="webview">
|
||
<!-- 使用 NavBar 组件 -->
|
||
<TopNavBar title="网页浏览" @back="goBack" />
|
||
|
||
<!-- WebView 内容区域 -->
|
||
<view class="webview-content">
|
||
<web-view :src="webviewUrl"></web-view>
|
||
</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();
|
||
const currentPage = pages[pages.length - 1];
|
||
const options = currentPage.options;
|
||
|
||
// 从页面参数中获取url
|
||
if (options.url) {
|
||
// 对URL进行解码，因为传递时可能被编码了
|
||
webviewUrl.value = decodeURIComponent(options.url);
|
||
}
|
||
});
|
||
</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>
|