161 lines
3.4 KiB
Vue
161 lines
3.4 KiB
Vue
<template>
|
||
<!-- 根元素绑定CSS变量，关联props中的颜色 -->
|
||
<view
|
||
class="service-first-tab"
|
||
:style="[
|
||
{ backgroundColor: bgColor },
|
||
{ '--active-color': activeColor }, // 激活色变量
|
||
{ '--inactive-color': inactiveColor }, // 非激活色变量
|
||
{ '--tab-padding-top': tabPaddingTop}, //
|
||
{ '--tab-padding-bottom': tabPaddingBottom} //
|
||
]"
|
||
>
|
||
<scroll-view
|
||
scroll-x
|
||
class="tab-scroll"
|
||
:show-scrollbar="false"
|
||
@touchmove.prevent.stop
|
||
>
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="tab.id"
|
||
:class="['tab-item', { active: activeId == tab.id }]"
|
||
:style="{ paddingTop: tabPaddingTop,paddingBottom: tabPaddingBottom }"
|
||
@click="handleTabClick(tab)"
|
||
>
|
||
<text class="tab-text">{{ tab.title }}</text>
|
||
<view class="tab-active-indicator" v-if="activeId == tab.id"></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ServiceFirstTab",
|
||
props: {
|
||
tabs: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => [],
|
||
},
|
||
activeId: {
|
||
type: [String, Number],
|
||
default: "",
|
||
},
|
||
tabWidth: {
|
||
type: Number,
|
||
default: 140,
|
||
},
|
||
// 已定义的激活色props（无需修改）
|
||
activeColor: {
|
||
type: String,
|
||
default: "#E8101E",
|
||
},
|
||
// 已定义的非激活色props（无需修改）
|
||
inactiveColor: {
|
||
type: String,
|
||
default: "#333",
|
||
},
|
||
fontSize: {
|
||
type: Number,
|
||
default: 28,
|
||
},
|
||
indicatorHeight: {
|
||
type: Number,
|
||
default: 6,
|
||
},
|
||
bgColor: {
|
||
type: String,
|
||
default: "#fafafa",
|
||
},
|
||
//itempading
|
||
tabPaddingTop: {
|
||
type: String,
|
||
default: "30rpx", // 默认值就是复合写法，验证生效
|
||
},
|
||
tabPaddingBottom: {
|
||
type: String,
|
||
default: "14rpx", // 默认值就是复合写法，验证生效
|
||
},
|
||
},
|
||
methods: {
|
||
handleTabClick(tab) {
|
||
if (this.activeId === tab.id) return;
|
||
this.$emit("tab-click", tab.id, tab.title, tab);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.service-first-tab {
|
||
position: relative;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
|
||
/* 反圆角 */
|
||
/* .service-first-tab::after {
|
||
content: '';
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
width: 100%;
|
||
height: 40rpx;
|
||
background: #fafafa;
|
||
border-top-left-radius: 30rpx;
|
||
border-top-right-radius: 30rpx;
|
||
} */
|
||
|
||
.tab-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-container {
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
gap: 60rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* padding: 0 20rpx; */
|
||
/* height: 88rpx; */
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
/* 非激活色：使用CSS变量 --inactive-color */
|
||
.tab-text {
|
||
font-size: 30rpx;
|
||
color: var(--inactive-color);
|
||
transition: color 0.2s;
|
||
white-space: nowrap;
|
||
|
||
}
|
||
|
||
/* 激活色：使用CSS变量 --active-color */
|
||
.tab-item.active .tab-text {
|
||
color: var(--active-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 下划线颜色：与激活色一致，使用 --active-color */
|
||
.tab-active-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 32rpx;
|
||
height: 6rpx; /* 可关联 indicatorHeight props，见延伸优化 */
|
||
background-color: var(--active-color);
|
||
border-radius: 10rpx;
|
||
transition: all 0.2s;
|
||
}
|
||
</style> |