新增webview页面根据传入参数动态设置导航栏标题的功能,支持通过enable_set_title参数控制是否强制替换默认标题,通过title参数传递自定义标题内容。
74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<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>
|