98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<view class="custom-tab-bar">
|
|
<view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(index)">
|
|
<image :src="tabIndex === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
|
|
<text :class="tabIndex === index ? 'tab-text tab-text-sel' : 'tab-text'">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "custom-tab-bar",
|
|
props: {
|
|
tabIndex: { //当前选中的tab项
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{
|
|
"pagePath": "/pages/home/home",
|
|
"text": "首页",
|
|
"iconPath": "/static/column/home.png",
|
|
"selectedIconPath": "/static/column/home_sel.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/sort/sort",
|
|
"text": "分类",
|
|
"iconPath": "/static/column/sort.png",
|
|
"selectedIconPath": "/static/column/sort_sel.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/supply_chain/supply_chain",
|
|
"text": "供应链",
|
|
"iconPath": "/static/column/supply_chain.png",
|
|
"selectedIconPath": "/static/column/supply_chain_sel.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/shopping_cart/shopping_cart",
|
|
"text": "购物车",
|
|
"iconPath": "/static/column/shopping.png",
|
|
"selectedIconPath": "/static/column/shopping_sel.png"
|
|
}, {
|
|
"pagePath": "/pages/mine/mine",
|
|
"text": "我的",
|
|
"iconPath": "/static/column/mine.png",
|
|
"selectedIconPath": "/static/column/mine_sel.png"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
switchTab(index) {
|
|
const pagePath = this.tabs[index].pagePath;
|
|
uni.switchTab({ url: pagePath });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-tab-bar {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
//height: 140rpx;
|
|
/* 根据需要调整 */
|
|
background-color: #fff;
|
|
/* 背景颜色 */
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 24px;
|
|
/* 图标大小 */
|
|
height: 24px;
|
|
/* 图标大小 */
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 12px;
|
|
/* 文字大小 */
|
|
}
|
|
|
|
.tab-text-sel {
|
|
color: $app-bt-bj;
|
|
}
|
|
</style> |