Files
lucky_shop/pages_tool/webview/webview.vue
ZF sun 6c3f90bf96 feat(webview): add dynamic navigation bar title setting function
新增webview页面根据传入参数动态设置导航栏标题的功能,支持通过enable_set_title参数控制是否强制替换默认标题,通过title参数传递自定义标题内容。
2026-07-15 10:38:31 +08:00

74 lines
1.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view :style="themeColor">
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
<web-view :src="src"></web-view>
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
</view>
</template>
<script>
import { decodeEntity } from '@/common/js/util.js';
export default {
data() {
return {
src: '',
title: '', // 标题栏标题
enableSetTitle: false, // 是否强制设置标题,用来替换Webview中的默认标题
};
},
onLoad(option) {
this.title = option?.title ?? '';
this.enableSetTitle = option?.enable_set_title == 1;
// #ifdef H5
this.src = decodeEntity(decodeURIComponent(option.src));
// #endif
// #ifndef H5
this.src = decodeEntity(decodeURIComponent(`${option.src}&from=mp-webview`));
// #endif
},
onReady() {
this.updateNavbarTitle();
},
onShow() {
this.updateNavbarTitle();
},
watch: {
title(newVal) {
this.updateNavbarTitle(newVal);
},
enableSetTitle() {
this.updateNavbarTitle();
}
},
methods: {
navigateBack() {
uni.navigateBack({
delta: 1
});
},
updateNavbarTitle(newTitle) {
if (this.enableSetTitle) {
uni.setNavigationBarTitle({
title: newTitle ?? this.title
});
}
}
}
};
</script>
<style lang="scss">
.navigate-back {
position: absolute;
top: 34rpx;
left: 34rpx;
z-index: 5;
font-size: $font-size-toolbar;
}
</style>