front-end/mobile-code/src/components/plugin/tabs.vue

<template>
	<view class="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:bgColor,top:isFixed?top+'px':'auto'}">
		<div class="item-wrap" :style="{width: isAdd ? `calc(100% - ${addTabWidth + 30}rpx)` : '100%'}">
			<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :class="{'border-left': borderLeft}" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
				<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">
					<div class="tabs-title">{{item.name}}</div>
					<!-- tab value -->
					<div class="tabs-value" v-if="item.value">{{ item.value }}</div>
				</view>
			</view>
		</div>
		<!-- tab add -->
		<div class="tabs-add" v-if="isAdd" :style="{width: `${addTabWidth}rpx`}">
			<i class="iconfont iconxiaoxi"></i>
			<span>添加</span>
		</div>
		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
	</view>
</template>

<script>
export default {
	name: 'tuiTabs',
	props: {
		// 标签页
		tabs: {
			type: Array,
			default() {
				return []
			}
		},
		// rpx
		height: {
			type: Number,
			default: 80
		},
		// rpx 只对左右padding起作用，上下为0
		padding: {
			type: Number,
			default: 30
		},
		// 背景色
		bgColor: {
			type: String,
			default: '#FFFFFF'
		},
		// 是否固定
		isFixed: {
			type: Boolean,
			default: false
		},
		// px
		top: {
			type: Number, // #ifndef H5

			default: 0, // #endif
			// #ifdef H5

			default: 0
			// #endif
		},
		// 是否去掉底部线条
		unlined: {
			type: Boolean,
			default: false
		},
		// 当前选项卡
		currentTab: {
			type: Number,
			default: 0
		},
		// 滑块宽度
		sliderWidth: {
			type: Number,
			default: 68
		},
		// 滑块高度
		sliderHeight: {
			type: Number,
			default: 6
		},
		sliderRadius: {
			type: String,
			default: '50rpx'
		},
		// 滑块bottom
		bottom: {
			type: String,
			default: '0'
		},
		// 标签页宽度
		itemWidth: {
			type: String,
			default: '25%'
		},
		// 字体颜色
		color: {
			type: String,
			default: '#999'
		},
		// 字体大小
		size: {
			type: Number,
			default: 28
		},
		// 选中后 是否加粗 ，未选中则无效
		bold: {
			type: Boolean,
			default: false
		},
		// 是否显示borer-right
		borderLeft: {
			type: Boolean,
			default: false
		},
		// 是否有新增按钮
		isAdd: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		currentTab() {
			this.checkCor()
		}
	},
	created() {
		setTimeout(() => {
			// 高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winWidth = res.windowWidth
					this.checkCor()
				}
			})
		}, 50)
	},
	data() {
		return {
			winWidth: 0,
			scrollLeft: 0,
			addTabWidth: 130
		}
	},
	computed: {
		// addTabWidth() {
		// 	return uni.upx2px(130)
		// }
	},
	methods: {
		checkCor: function() {
			let addTabWidth = this.isAdd ? uni.upx2px(this.addTabWidth + 30) : 0
			let tabsNum = this.tabs.length
			let padding = (this.winWidth / 750) * this.padding
			let width = this.winWidth - padding * 2 - addTabWidth
			let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding
			let scrollLeft = left
			if (this.currentTab > 0) {
				scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab
			}
			this.scrollLeft = scrollLeft
		},
		// 点击标题切换当前页时改变样式
		swichTabs: function(index) {
			let item = this.tabs[index]
			if (item && item.disabled) return
			if (this.currentTab == index) {
				return false
			} else {
				this.$emit('change', {
					index: Number(index)
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.tabs-add {
		@include disFlex(center, center);
		height: 60px;
		border-left: 1px solid $borderColor;
		padding-left: 30px;
		.iconfont {
			margin-right: 10px;
		}
	}
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
		box-shadow: 4px 4px 10px #eee;
		.tui-tabs-item {
			&.border-left {
				border-left: 2px solid #ddd;
			}
		}
		.tui-tabs-item:first-child {
			&.border-left {
				border-left: none;
			}
		}
	}

	.tui-tabs-relative {
		position: relative;
	}

	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}

	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-unlined::before {
		border-bottom: 0 !important;
	}

	.item-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-disabled {
		opacity: 0.6;
	}

	.tui-tabs-title {
		// display: flex;
		// align-items: center;
		// justify-content: center;
		position: relative;
		z-index: 2;
		width: 100%;
	}
	.tabs-title {
		text-align: center;
	}
	.tabs-value {
		// @include disFlex(center, center);
		font-size: 24px;
		text-align: center;
		margin-top: 6px;
	}

	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
		color: $mainColor;
	}

	.tui-tabs-slider {
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
		transform: translateZ(0);
		background: $mainColor;
	}
</style>