125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<template>
|
|
<view class="custom-tab-bar" :class="platformType ? '' : 'iosplatformType'">
|
|
<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,
|
|
platformType: 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",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
/*#ifdef APP-PLUS*/
|
|
const appUpdate = uni.getStorageSync("platform");
|
|
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
|
|
/*#endif*/
|
|
},
|
|
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: calc(100rpx + env(safe-area-inset-bottom));
|
|
/* 根据需要调整 */
|
|
background-color: #fff;
|
|
/* 背景颜色 */
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding-bottom: calc(env(safe-area-inset-bottom));
|
|
&.iosplatformType {
|
|
height: 100rpx;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-icon {
|
|
margin-top: 5rpx;
|
|
width: 44rpx;
|
|
/* 图标大小 */
|
|
height: 44rpx;
|
|
/* 图标大小 */
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 24rpx;
|
|
/* 文字大小 */
|
|
}
|
|
|
|
.tab-text-sel {
|
|
color: $app-bt-bj;
|
|
}
|
|
</style>
|