Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(vr page): 优化VR页面导航体验，添加返回主页按钮并修复返回逻辑

Browse Source 
1. 移除旧的自定义返回图标，改用cover-view兼容web-view层级问题
2. 新增主页导航按钮，支持一键返回首页
3. 完善返回逻辑，处理页面栈仅当前页的异常返回场景
4. 调整导航按钮样式，添加半透明背景和圆形布局
This commit is contained in:
ZF Sun
2026-07-06 11:55:18 +08:00
parent 9dabcc2135
commit 960f4ebaaa
1 changed files with 82 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
pages_tool/vr/index.vue
View File

@@ -1,53 +1,82 @@
<template> <template>
<view :style="themeColor"> <view :style="themeColor">
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view> <web-view :src="src"></web-view>
<web-view :src="src"></web-view> <!-- 顶部导航覆盖层:使用 cover-view 兼容微信小程序的 web-view 原生组件 -->
<!-- 底部tabBar --> <cover-view class="vr-nav-back icondiy icon-system-arrow-go-back-line" @click="navigateBack"></cover-view>
<!-- <view id="tab-bar"> <cover-view class="vr-nav-home icondiy icon-system-home-2-line" @click="goHome"></cover-view>
<diy-bottom-nav></diy-bottom-nav> </view>
</view> --> </template>
</view>
</template> <script>
export default {
<script> data() {
export default { return {
data() { src: ''
return { };
src: '' },
}; onLoad(option) {
}, // this.src = decodeURIComponent(option.src);
onLoad(option) { this.$api.sendRequest({
// this.src = decodeURIComponent(option.src); url: '/api/config/defaultvr',
this.$api.sendRequest({ success: res => {
url: '/api/config/defaultvr', if (res.code == 0) {
success: res => { uni.setNavigationBarTitle({
if (res.code == 0) { title:res.data.title
uni.setNavigationBarTitle({ })
title:res.data.title this.src = res.data.url
}) }
this.src = res.data.url },
} fail: res => {
}, }
fail: res => { });
} },
}); methods: {
}, navigateBack() {
methods: { const pages = getCurrentPages();
navigateBack() { if (pages.length > 1) {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}); });
} } else {
} // 直接进入的场景(分享链接 / 外部链接 / 扫码等),页面栈只有当前页,
}; // navigateBack 会失败。重定向到首页,保证用户能离开 VR 页面。
</script> uni.reLaunch({
url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
<style lang="scss"> });
.navigate-back { }
position: absolute; },
top: 34rpx; goHome() {
left: 34rpx; uni.reLaunch({
z-index: 5; url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
font-size: $font-size-toolbar; });
} }
</style> }
};
</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>