436 lines
9.7 KiB
Vue
436 lines
9.7 KiB
Vue
<template>
|
|
<view class="custom-tabs">
|
|
<!-- 选项卡头部 -->
|
|
<scroll-view
|
|
class="tabs-header"
|
|
:scroll-x="scrollEnable"
|
|
:scroll-left="scrollLeft"
|
|
scroll-with-animation
|
|
:show-scrollbar="scrollEnable"
|
|
:scroll-into-view="activeTabId"
|
|
:style="getScrollViewStyle()"
|
|
@scroll="handleScroll"
|
|
>
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="smart-tab-item"
|
|
:id="`tab_${index}`"
|
|
:class="{ 'active': currentIndex === index }"
|
|
:style="getTabStyle(index)"
|
|
@click="handleTabClick(index)"
|
|
>
|
|
<text class="tab-text">{{ tab.label }}</text>
|
|
<view v-if="showBadge && tab.badge" class="tab-badge">
|
|
{{ tab.badge > 99 ? '99+' : tab.badge }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SmartTabs',
|
|
props: {
|
|
// 是否支持滚动
|
|
scrollEnable:{
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 选项卡配置
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
// 初始选中的索引
|
|
initialIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
// 动画时长
|
|
duration: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
// 是否显示徽章
|
|
showBadge: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 激活状态颜色
|
|
activeColor: {
|
|
type: String,
|
|
default: '#007AFF'
|
|
},
|
|
// 非激活状态颜色
|
|
inactiveColor: {
|
|
type: String,
|
|
default: '#333'
|
|
},
|
|
// 最小项宽度（用于平铺模式）
|
|
minItemWidth: {
|
|
type: Number,
|
|
default: 120 // rpx
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: this.initialIndex,
|
|
scrollLeft: 0,
|
|
tabWidths: [],
|
|
containerWidth: 0,
|
|
activeTabId: `tab_${this.initialIndex}`,
|
|
canScrollLeft: false,
|
|
canScrollRight: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.calculateLayout();
|
|
});
|
|
},
|
|
methods: {
|
|
// 计算布局
|
|
calculateLayout() {
|
|
this.getContainerWidth().then(() => {
|
|
this.calculateTabPositions().then(() => {
|
|
this.checkScrollability();
|
|
this.scrollToCurrentTab();
|
|
});
|
|
});
|
|
},
|
|
|
|
// 获取容器宽度
|
|
getContainerWidth() {
|
|
return new Promise((resolve) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.tabs-header').boundingClientRect();
|
|
|
|
query.exec(res => {
|
|
if (res && res[0]) {
|
|
this.containerWidth = res[0].width;
|
|
}
|
|
resolve();
|
|
});
|
|
});
|
|
},
|
|
|
|
// 计算选项卡位置
|
|
calculateTabPositions() {
|
|
return new Promise((resolve) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
this.tabs.forEach((_, index) => {
|
|
query.select(`#tab_${index}`).boundingClientRect();
|
|
});
|
|
|
|
query.exec(res => {
|
|
this.tabWidths = res.map(item => item ? item.width : 0);
|
|
resolve();
|
|
});
|
|
});
|
|
},
|
|
|
|
// 检查是否需要滚动
|
|
checkScrollability() {
|
|
this.checkScrollState();
|
|
},
|
|
|
|
// 检查滚动状态
|
|
checkScrollState() {
|
|
if (!this.$props.scrollEnable) {
|
|
this.canScrollLeft = false;
|
|
this.canScrollRight = false;
|
|
return;
|
|
}
|
|
|
|
this.canScrollLeft = this.scrollLeft > 0;
|
|
|
|
const totalWidth = this.tabWidths.reduce((sum, width) => sum + width, 0);
|
|
this.canScrollRight = this.scrollLeft < totalWidth - this.containerWidth;
|
|
},
|
|
|
|
// 滚动到当前选项卡
|
|
scrollToCurrentTab() {
|
|
if (this.tabWidths.length === 0 || !this.$props.scrollEnable) return;
|
|
|
|
let totalWidth = 0;
|
|
for (let i = 0; i < this.currentIndex; i++) {
|
|
totalWidth += this.tabWidths[i];
|
|
}
|
|
|
|
// 计算滚动位置，使当前选项卡居中
|
|
const currentTabWidth = this.tabWidths[this.currentIndex];
|
|
const scrollLeft = totalWidth - (this.containerWidth - currentTabWidth) / 2;
|
|
|
|
this.scrollLeft = scrollLeft;
|
|
this.activeTabId = `tab_${this.currentIndex}`;
|
|
this.checkScrollState();
|
|
},
|
|
|
|
// 处理滚动事件
|
|
handleScroll(e) {
|
|
this.scrollLeft = e.detail.scrollLeft;
|
|
this.checkScrollState();
|
|
},
|
|
|
|
// 处理选项卡点击
|
|
handleTabClick(index) {
|
|
if (this.currentIndex !== index) {
|
|
this.currentIndex = index;
|
|
this.scrollToCurrentTab();
|
|
this.$emit('change', index);
|
|
}
|
|
},
|
|
|
|
// 处理滑动切换
|
|
handleSwiperChange(e) {
|
|
const index = e.detail.current;
|
|
if (this.currentIndex !== index) {
|
|
this.currentIndex = index;
|
|
this.scrollToCurrentTab();
|
|
this.$emit('change', index);
|
|
}
|
|
},
|
|
|
|
// 获取选项卡样式
|
|
getTabStyle(index) {
|
|
const isActive = this.currentIndex === index;
|
|
const style = {
|
|
color: isActive ? this.activeColor : this.inactiveColor,
|
|
fontWeight: isActive ? 'bold' : 'normal',
|
|
width: this.scrollEnable ? 'auto' : `${100 / this.tabs.length}%`,
|
|
};
|
|
|
|
// 如果不是滚动模式，设置固定宽度
|
|
if (!this.$props.scrollEnable) {
|
|
style.flex = '1';
|
|
style.minWidth = '0';
|
|
style.textAlign = 'center';
|
|
}
|
|
|
|
return style;
|
|
},
|
|
|
|
getScrollViewStyle() {
|
|
console.log("aaa",this.$props.scrollEnable)
|
|
const isActive = this.$props.scrollEnable;
|
|
const style = {
|
|
'--scroll-content-display': isActive ? 'block' : 'flex'
|
|
};
|
|
|
|
console.log("aaa",this.$props.scrollEnable)
|
|
|
|
return style
|
|
},
|
|
|
|
// 切换到指定选项卡
|
|
switchTo(index) {
|
|
if (index >= 0 && index < this.tabs.length && index !== this.currentIndex) {
|
|
this.currentIndex = index;
|
|
this.scrollToCurrentTab();
|
|
this.$emit('change', index);
|
|
}
|
|
},
|
|
|
|
// 向左滚动
|
|
scrollLeftByStep() {
|
|
this.scrollLeft = Math.max(0, this.scrollLeft - 100);
|
|
this.checkScrollState();
|
|
},
|
|
|
|
// 向右滚动
|
|
scrollRightByStep() {
|
|
const totalWidth = this.tabWidths.reduce((sum, width) => sum + width, 0);
|
|
const maxScroll = totalWidth - this.containerWidth;
|
|
this.scrollLeft = Math.min(maxScroll, this.scrollLeft + 100);
|
|
this.checkScrollState();
|
|
}
|
|
},
|
|
watch: {
|
|
initialIndex(newVal) {
|
|
if (newVal !== this.currentIndex) {
|
|
this.currentIndex = newVal;
|
|
this.scrollToCurrentTab();
|
|
}
|
|
},
|
|
tabs() {
|
|
this.$nextTick(() => {
|
|
this.calculateLayout();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.tabs-header {
|
|
display: flex;
|
|
justify-content:center;
|
|
white-space: nowrap;
|
|
padding: 10rpx 0;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* #endif */
|
|
|
|
// 滚动模式下的阴影效果
|
|
&.scrollable {
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20rpx;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 20rpx;
|
|
height: 100%;
|
|
background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
.tabs-header ::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
/* #endif */
|
|
|
|
.smart-tab-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12rpx 30rpx;
|
|
font-size: 28rpx;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
box-sizing: border-box;
|
|
|
|
// 平铺模式下的样式
|
|
.tabs-header:not(.scrollable) & {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.active {
|
|
.tab-text {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10rpx;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4rpx;
|
|
background-color: v-bind(activeColor);
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
::v-deep .tabs-header .uni-scroll-view-content {
|
|
// display: flex;
|
|
display: var(--scroll-content-display, block);
|
|
}
|
|
/* #endif */
|
|
|
|
/* 微信小程序需要特殊处理 */
|
|
/* #ifdef MP-WEIXIN */
|
|
.tabs-header .uni-scroll-view-content {
|
|
display: var(--scroll-content-display, block) !important;
|
|
|
|
}
|
|
/* #endif */
|
|
|
|
/* #ifdef MP-ALIPAY */
|
|
.tabs-header ::-webkit-scroll-view-content {
|
|
display: var(--scroll-content-display, block);
|
|
}
|
|
/* #endif */
|
|
|
|
.tab-badge {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: 10rpx;
|
|
min-width: 36rpx;
|
|
height: 36rpx;
|
|
padding: 0 6rpx;
|
|
background-color: #ff3b30;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.tabs-content {
|
|
flex: 1;
|
|
height: 0; // 解决部分平台高度问题
|
|
}
|
|
|
|
// 滚动提示按钮
|
|
.scroll-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: rgba(0,0,0,0.3);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 30;
|
|
cursor: pointer;
|
|
|
|
&.left {
|
|
left: 10rpx;
|
|
}
|
|
|
|
&.right {
|
|
right: 10rpx;
|
|
}
|
|
|
|
.icon {
|
|
color: white;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
</style> |