charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
charles
2025-08-05 15:25:23 +08:00
parent 0515e9d48c
commit 043f477609
1263 changed files with 202002 additions and 159652 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/custom-tab-bar.vue
+94 -94
View File
@@ -1,95 +1,95 @@
<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/hash_union/hash_union",
// "text": "哈希联盟",
// "iconPath": "/static/column/hx.png",
// "selectedIconPath": "/static/column/hx_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;
}
<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/hash_union/hash_union",
// "text": "哈希联盟",
// "iconPath": "/static/column/hx.png",
// "selectedIconPath": "/static/column/hx_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>