修复tabber
This commit is contained in:
@@ -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' })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
"quickapp" : {},
|
"quickapp" : {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
"appid" : "wx8f0d644d1d8985f6",
|
"appid" : "touristappid",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false
|
"urlCheck" : false
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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": {}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user