修复tabber

This commit is contained in:
时舟年
2026-06-04 16:47:31 +08:00
parent 8c96e2099c
commit f0dda998a8
4 changed files with 23 additions and 153 deletions
+9 -10
View File
@@ -16,7 +16,7 @@ export const PAGE = {
BODY_TEST_COMPARE: '/pages/memberInfo/bodyTestCompare', BODY_TEST_COMPARE: '/pages/memberInfo/bodyTestCompare',
BODY_TEST_SETTINGS: '/pages/memberInfo/bodyTestSettings', BODY_TEST_SETTINGS: '/pages/memberInfo/bodyTestSettings',
BODY_TEST_TREND: '/pages/memberInfo/bodyTestTrend', BODY_TEST_TREND: '/pages/memberInfo/bodyTestTrend',
COURSE_LIST: '/pages/memberInfo/courseList', COURSE_LIST: '/pages/groupCourse/list',
COURSE_DETAIL: '/pages/memberInfo/courseDetail', COURSE_DETAIL: '/pages/memberInfo/courseDetail',
COUPON_DETAIL: '/pages/memberInfo/couponDetail', COUPON_DETAIL: '/pages/memberInfo/couponDetail',
COUPON_CENTER: '/pages/memberInfo/couponCenter', COUPON_CENTER: '/pages/memberInfo/couponCenter',
@@ -87,17 +87,16 @@ export function switchToTab(url) {
if (getCurrentRoutePath() === path || tabNavigating) return if (getCurrentRoutePath() === path || tabNavigating) return
tabNavigating = true tabNavigating = true
const done = () => { uni.reLaunch({
setTimeout(() => {
tabNavigating = false
}, 320)
}
uni.switchTab({
url: path, url: path,
complete: done, complete: () => {
setTimeout(() => {
tabNavigating = false
}, 320)
},
fail: (err) => { fail: (err) => {
console.warn('[switchTab]', path, err) console.error('[reLaunch]', path, err)
tabNavigating = false
uni.showToast({ title: '页面跳转失败', icon: 'none' }) uni.showToast({ title: '页面跳转失败', icon: 'none' })
} }
}) })
+13 -103
View File
@@ -2,74 +2,37 @@
<view class="tab-bar"> <view class="tab-bar">
<view <view
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
<<<<<<< HEAD
:key="tab.path" :key="tab.path"
:class="['tab-item', { active: currentIndex === index }]" :class="['tab-item', { active: currentIndex === index }]"
hover-class="tab-item--hover" hover-class="tab-item--hover"
@tap="onTabTap(index)" @tap.stop="onTabTap(index)"
> >
<image <image
:src="currentIndex === index ? tab.iconActive : tab.icon" :src="currentIndex === index ? tab.iconActive : tab.icon"
mode="aspectFit" mode="aspectFit"
class="tab-icon" class="tab-icon"
/> />
=======
:key="index"
:class="['tab-item', { active: currentActive === index }]"
@click="switchTab(index)"
>
<!-- 导航栏图标 -->
<image :src="currentActive === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
<!-- 导航栏标签文字 -->
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
<text class="tab-label">{{ tab.label }}</text> <text class="tab-label">{{ tab.label }}</text>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
<<<<<<< HEAD import { computed } from 'vue'
import { computed, ref } from 'vue'
import { import {
PAGE, PAGE,
TAB_ROUTES, TAB_ROUTES,
getCurrentRoutePath, getCurrentRoutePath,
getTabIndexByRoute, getTabIndexByRoute
switchToTab
} from '@/common/constants/routes.js' } from '@/common/constants/routes.js'
const props = defineProps({ const props = defineProps({
/** 当前 Tab 索引,由 Tab 页传入以保证高亮准确 */ active: { type: Number, default: -1 },
active: { activeTab: { type: Number, default: -1 }
type: Number,
default: -1
}
}) })
const tapping = ref(false)
=======
import { ref, watch } from 'vue'
// 当前激活的导航栏索引(从外部传入)
const props = defineProps({
activeTab: {
type: Number,
default: 0
}
})
// 当前激活状态
const currentActive = ref(props.activeTab)
// 监听外部传入的激活状态变化
watch(() => props.activeTab, (newVal) => {
currentActive.value = newVal
})
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
const tabs = [ const tabs = [
{ {
<<<<<<< HEAD
path: PAGE.INDEX, path: PAGE.INDEX,
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png', iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
@@ -103,68 +66,19 @@ const tabs = [
const currentIndex = computed(() => { const currentIndex = computed(() => {
if (props.active >= 0) return props.active if (props.active >= 0) return props.active
if (props.activeTab >= 0) return props.activeTab
return getTabIndexByRoute(getCurrentRoutePath()) return getTabIndexByRoute(getCurrentRoutePath())
}) })
function onTabTap(index) { function onTabTap(index) {
if (tapping.value || index === currentIndex.value) return if (index === currentIndex.value) return
tapping.value = true const path = TAB_ROUTES[index]
switchToTab(TAB_ROUTES[index]) uni.reLaunch({
setTimeout(() => { url: path,
tapping.value = false fail: () => {
}, 350) uni.showToast({ title: '页面跳转失败', icon: 'none' })
======= }
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
label: '首页',
path: '/pages/index/index'
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
label: '课程',
path: '/pages/groupCourse/list'
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
label: '训练',
path: '/pages/train/index'
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
label: '发现',
path: '/pages/discover/index'
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
label: '我的',
path: '/pages/profile/index'
}
]
// 切换标签页
const switchTab = (index) => {
currentActive.value = index
const tab = tabs[index]
// 获取当前页面路径
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const currentPath = '/' + currentPage.route
// 如果点击的是当前页面,不跳转
if (currentPath === tab.path) {
return
}
// 跳转对应页面
uni.redirectTo({
url: tab.path
}) })
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
} }
</script> </script>
@@ -183,11 +97,7 @@ const switchTab = (index) => {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
border-radius: 32rpx 32rpx 0 0; border-radius: 32rpx 32rpx 0 0;
<<<<<<< HEAD
z-index: 999; z-index: 999;
=======
z-index: 100;
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
} }
.tab-item { .tab-item {
+1 -1
View File
@@ -50,7 +50,7 @@
"quickapp" : {}, "quickapp" : {},
/* */ /* */
"mp-weixin" : { "mp-weixin" : {
"appid" : "wx8f0d644d1d8985f6", "appid" : "touristappid",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false
}, },
-39
View File
@@ -232,44 +232,5 @@
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
}, },
"tabBar": {
"custom": true,
"color": "#94a3b8",
"selectedColor": "#f97316",
"backgroundColor": "#1A4A6F",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home.png"
},
{
"pagePath": "pages/course/index",
"text": "课程",
"iconPath": "static/images/bookmark.png",
"selectedIconPath": "static/images/bookmark.png"
},
{
"pagePath": "pages/train/index",
"text": "训练",
"iconPath": "static/images/dumbbell.png",
"selectedIconPath": "static/images/dumbbell.png"
},
{
"pagePath": "pages/discover/index",
"text": "发现",
"iconPath": "static/images/activity.png",
"selectedIconPath": "static/images/activity.png"
},
{
"pagePath": "pages/memberInfo/memberInfo",
"text": "我的",
"iconPath": "static/images/user.png",
"selectedIconPath": "static/images/user.png"
}
]
},
"uniIdRouter": {} "uniIdRouter": {}
} }