108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<view class="custom-tab-bar">
|
|
<view
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
class="tab-bar-item"
|
|
@click="switchTab(item.pagePath)"
|
|
>
|
|
<!-- 图标 -->
|
|
<image
|
|
class="icon"
|
|
:src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"
|
|
></image>
|
|
<!-- 文字 -->
|
|
<text
|
|
class="text"
|
|
:style="{color: currentPath === item.pagePath ? selectedColor : color}"
|
|
>
|
|
{{ item.text }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
// ========== 配置数据 ==========
|
|
// 从你原来的配置迁移过来的数据
|
|
const color = '#999999'
|
|
const selectedColor = '#AB002D'
|
|
const tabList = ref([
|
|
{
|
|
pagePath: "pages/index/index",
|
|
iconPath: "/static/tabbar/home.png",
|
|
selectedIconPath: "/static/tabbar/active-home.png",
|
|
text: "首页"
|
|
},
|
|
{
|
|
pagePath: "pages/order/index",
|
|
iconPath: "/static/tabbar/order.png",
|
|
selectedIconPath: "/static/tabbar/active-order.png",
|
|
text: "订单"
|
|
},
|
|
{
|
|
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;
|
|
border-top: 1px solid #000000; /* 对应 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> |