159 lines
3.9 KiB
Vue
159 lines
3.9 KiB
Vue
<template>
|
|
|
|
<view class="custom-tab-bar">
|
|
<!-- 首页 -->
|
|
<view class="tab-bar-item" @click="switchTab(homeTab.pagePath)">
|
|
<image class="icon" :src="currentPath === homeTab.pagePath ? homeTab.selectedIconPath : homeTab.iconPath">
|
|
</image>
|
|
|
|
<text class="text" :style="{color: currentPath === homeTab.pagePath ? selectedColor : color}">
|
|
{{ homeTab.text }}
|
|
</text>
|
|
</view>
|
|
<!-- 回忆 -->
|
|
<view class="tab-bar-item" @click="switchTab(memoryTab.pagePath)">
|
|
<image class="icon" :src="currentPath === memoryTab.pagePath ? memoryTab.selectedIconPath : memoryTab.iconPath">
|
|
</image>
|
|
|
|
<text class="text" :style="{color: currentPath === memoryTab.pagePath ? selectedColor : color}">
|
|
{{ memoryTab.text }}
|
|
</text>
|
|
</view>
|
|
<!-- 发现页 -->
|
|
<view class="tab-bar-item relative" @click="switchTab(findTab.pagePath)">
|
|
<image class="absolute top-[-10px] w-[40px] h-[40px]"
|
|
:src="currentPath === findTab.pagePath ? findTab.selectedIconPath : findTab.iconPath"></image>
|
|
|
|
<!-- <text class="text" :style="{color: currentPath === findTab.pagePath ? selectedColor : color}">
|
|
{{ findTab.text }}
|
|
</text> -->
|
|
</view>
|
|
<!-- MBIT -->
|
|
<view class="tab-bar-item" @click="switchTab(mbitTab.pagePath)">
|
|
<image class="icon" :src="currentPath === mbitTab.pagePath ? mbitTab.selectedIconPath : mbitTab.iconPath">
|
|
</image>
|
|
|
|
<text class="text" :style="{color: currentPath === mbitTab.pagePath ? selectedColor : color}">
|
|
{{ mbitTab.text }}
|
|
</text>
|
|
</view>
|
|
<!-- 个人页面 -->
|
|
<view class="tab-bar-item" @click="switchTab(mineTab.pagePath)">
|
|
<image class="icon" :src="currentPath === mineTab.pagePath ? mineTab.selectedIconPath : mineTab.iconPath">
|
|
</image>
|
|
|
|
<text class="text" :style="{color: currentPath === mineTab.pagePath ? selectedColor : color}">
|
|
{{ mineTab.text }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
|
|
// 从你原来的配置迁移过来的数据
|
|
const color = '#cdcdcd'
|
|
const selectedColor = '#2c2c2c'
|
|
//首页配置
|
|
const homeTab = {
|
|
pagePath: "pages/index/index",
|
|
iconPath: "/static/tabbar/home.png",
|
|
selectedIconPath: "/static/tabbar/active-home.png",
|
|
text: "home"
|
|
}
|
|
//记忆
|
|
const memoryTab = {
|
|
pagePath: "pages/memory/index",
|
|
iconPath: "/static/tabbar/love.png",
|
|
selectedIconPath: "/static/tabbar/active-love.png",
|
|
text: "memory"
|
|
}
|
|
|
|
//发现页
|
|
const findTab = {
|
|
pagePath: "pages/order/index",
|
|
iconPath: "/static/tabbar/find.png",
|
|
selectedIconPath: "/static/tabbar/active-find.png",
|
|
text: "find"
|
|
}
|
|
//mbit
|
|
const mbitTab = {
|
|
pagePath: "pages/mbti/index",
|
|
iconPath: "/static/tabbar/head.png",
|
|
selectedIconPath: "/static/tabbar/active-head.png",
|
|
text: "MBIT"
|
|
}
|
|
//个人页
|
|
const mineTab = {
|
|
pagePath: "pages/mine/index",
|
|
iconPath: "/static/tabbar/mine.png",
|
|
selectedIconPath: "/static/tabbar/active-mine.png",
|
|
text: "我的"
|
|
}
|
|
|
|
// ========== 逻辑处理 ==========
|
|
const currentPath = ref('')
|
|
|
|
// 获取当前页面路径，用于匹配高亮
|
|
const updateSelected = () => {
|
|
const pages = getCurrentPages()
|
|
const currentPage = pages[pages.length - 1]
|
|
currentPath.value = currentPage.route
|
|
}
|
|
|
|
// 切换页面
|
|
const switchTab = (url) => {
|
|
// 如果点击的是当前页，不执行跳转
|
|
if (currentPath.value === url) return
|
|
|
|
uni.switchTab({
|
|
url: '/' + url
|
|
})
|
|
}
|
|
|
|
// 组件挂载后获取当前路径
|
|
onMounted(() => {
|
|
updateSelected()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-tab-bar {
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
/* 根据需要调整高度 */
|
|
background-color: #ffffff;
|
|
|
|
/* 对应 borderStyle: black */
|
|
z-index: 999;
|
|
}
|
|
|
|
.tab-bar-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
}
|
|
</style> |