ZF sun
960f4ebaaa
1. 移除旧的自定义返回图标，改用cover-view兼容web-view层级问题 2. 新增主页导航按钮，支持一键返回首页 3. 完善返回逻辑，处理页面栈仅当前页的异常返回场景 4. 调整导航按钮样式，添加半透明背景和圆形布局
83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<view :style="themeColor">
|
|
<web-view :src="src"></web-view>
|
|
<!-- 顶部导航覆盖层:使用 cover-view 兼容微信小程序的 web-view 原生组件 -->
|
|
<cover-view class="vr-nav-back icondiy icon-system-arrow-go-back-line" @click="navigateBack"></cover-view>
|
|
<cover-view class="vr-nav-home icondiy icon-system-home-2-line" @click="goHome"></cover-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
src: ''
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
// this.src = decodeURIComponent(option.src);
|
|
this.$api.sendRequest({
|
|
url: '/api/config/defaultvr',
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
uni.setNavigationBarTitle({
|
|
title:res.data.title
|
|
})
|
|
this.src = res.data.url
|
|
}
|
|
},
|
|
fail: res => {
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
navigateBack() {
|
|
const pages = getCurrentPages();
|
|
if (pages.length > 1) {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
} else {
|
|
// 直接进入的场景(分享链接 / 外部链接 / 扫码等),页面栈只有当前页,
|
|
// navigateBack 会失败。重定向到首页,保证用户能离开 VR 页面。
|
|
uni.reLaunch({
|
|
url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
|
|
});
|
|
}
|
|
},
|
|
goHome() {
|
|
uni.reLaunch({
|
|
url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.vr-nav-back,
|
|
.vr-nav-home {
|
|
position: absolute;
|
|
top: 34rpx;
|
|
z-index: 5;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.vr-nav-back {
|
|
left: 34rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.vr-nav-home {
|
|
right: 34rpx;
|
|
font-size: 40rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
</style>
|