feat: 修复 H5 底部导航覆盖 + 更新项目进度文档
## H5 底部导航修复 (Bug #10) - 精简 App.vue,移除重复 tabbar,仅保留全局样式 - uni-page 设置 height: calc(100% - 50px) + overflow-y: auto - 内容区域精确停在底部导航上方,独立滚动不再叠加 - 恢复 custom-tab-bar 组件 ## 项目进度文档 - PROGRESS.md 更新至 10 个 Bug 修复 - 新增 H5 底部导航修复记录 - 新增历史变更条目
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="custom-tabbar" v-if="showTabbar">
|
||||
<view class="custom-tabbar">
|
||||
<view
|
||||
class="tab-item"
|
||||
v-for="(item, index) in tabList"
|
||||
@@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
|
||||
const current = ref(0)
|
||||
|
||||
@@ -25,31 +25,27 @@ const tabList = ref([
|
||||
{ pagePath: '/pages/quotation/quotation', text: '报价', icon: '📄' },
|
||||
])
|
||||
|
||||
const updateCurrent = () => {
|
||||
const hash = window.location.hash || ''
|
||||
for (let i = 0; i < tabList.value.length; i++) {
|
||||
if (hash.includes(tabList.value[i].pagePath)) {
|
||||
current.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
current.value = 0
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateCurrent()
|
||||
})
|
||||
|
||||
const showTabbar = computed(() => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length) {
|
||||
const currentPage = pages[pages.length - 1].route || ''
|
||||
return !currentPage.includes('login')
|
||||
watch(
|
||||
() => window.location.hash,
|
||||
() => {
|
||||
updateCurrent()
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
const updateCurrent = () => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length) {
|
||||
const currentPage = pages[pages.length - 1].$page?.fullPath || pages[pages.length - 1].route || ''
|
||||
const index = tabList.value.findIndex(item => currentPage.includes(item.pagePath))
|
||||
if (index !== -1) current.value = index
|
||||
}
|
||||
}
|
||||
|
||||
uni.onAppRoute(() => {
|
||||
updateCurrent()
|
||||
})
|
||||
)
|
||||
|
||||
const switchTab = (index) => {
|
||||
if (current.value === index) return
|
||||
@@ -64,11 +60,12 @@ const switchTab = (index) => {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 999;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 99999;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -77,19 +74,27 @@ const switchTab = (index) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 4rpx;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.tab-text.active {
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user