siyu_app/components/me-tabs/me-tabs.vue

<!-- tab组件: <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
<template>
	<view class="me-tabs" :class="{'tabs-fixed': fixed}" :style="{height: tabHeightVal}">
		<scroll-view v-if="tabs.length" :id="viewId" :scroll-left="scrollLeft" scroll-x scroll-with-animation :scroll-animation-duration="300">
			<view class="tabs-item" :class="{'tabs-flex':!isScroll, 'tabs-scroll':isScroll}">
				<!-- tab -->
				<view class="tab-item"  v-for="(tab, i) in tabs"  :id="'tabitem'+i" :ref="'tabitem'+i" :class="{'active': value===i}" :style="{ height: tabHeightVal, 'line-height':tabHeightVal,'color':value===i?actColor:norColor }" :key="i" @click="tabClick(i)">
					{{getTabName(tab)}}
				</view>
				
				<!-- 下划线 -->
				<view class="tabs-line" :style="{left:lineLeft}"></view>
			</view>
		</scroll-view>
	</view>
</template>


<script>
	export default {
		props: {
			tabs: {
				type: Array,
				default() {
					return []
				}
			},
			nameKey: {
				type: String,
				default: 'dictLabel'
			},
			value: {
				type: [String, Number],
				default: 0
			},
			fixed: Boolean,
			tabWidth: Number,
			height: {
				type: Number,
				default: 64
			},
			norColor: {
				type: String,
				default: '#333333'
			},
			actColor: {
				type: String,
				default: '#FF5C03'
			},
		},
		data() {
			return {
				viewId: 'id_' + Math.random().toString(36).substr(2, 16),
				scrollLeft: 0,
				tabListSize: [],
				lineLeft: '0px',
				
			}
		},
		computed: {
			isScroll() {
				return this.tabWidth && this.tabs.length;
			},
			tabHeightPx() {
				return uni.upx2px(this.height);
			},
			tabHeightVal() {
				return this.tabHeightPx + 'px';
			},
			tabWidthPx() {
				return uni.upx2px(this.tabWidth);
			},
			tabWidthVal() {
				return this.isScroll ? this.tabWidthPx + 'px' : '';
			}
		},
		watch: {
			tabs() {
				this.warpWidth = null;
				this.updateTabs();
			},
			value() {
				console.log("qxj value changed");
				this.updateTabs();
			}
		},
		methods: {
			getTabName(tab) {
				return typeof tab === "object" ? tab[this.nameKey] : tab;
			},
			tabClick(i) {
				if (this.value !== i) {
					this.$emit("input", i);
					this.$emit("change", i);
				}
			},
			async updateTabs() {
				await this.selectorQuery();
				this.scrollCenter();
				this.updateLineLeft();
			},
			async scrollCenter() {
				if (!this.isScroll) return;
				if (!this.warpWidth) {
					let rect = await this.initWarpRect();
					this.warpWidth = rect ? rect.width : uni.getSystemInfoSync().windowWidth;
				}
				let tabLeft = this.tabWidthPx * this.value + this.tabWidthPx / 2;
				let diff = tabLeft - this.warpWidth / 2;
				this.scrollLeft = diff;
				// #ifdef MP-TOUTIAO
				this.scrollTimer && clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(() => {
					this.scrollLeft = Math.ceil(diff);
				}, 400);
				// #endif
			},
			initWarpRect() {
				return new Promise(resolve => {
					setTimeout(() => {
						let query = uni.createSelectorQuery();
						// #ifndef MP-ALIPAY
						query = query.in(this);
						// #endif
						query.select('#' + this.viewId).boundingClientRect(data => {
							resolve(data);
						}).exec();
					}, 20);
				});
			},
			selectorQuery() {
				return new Promise(resolve => {
					if (this.tabs.length === 0) {
						resolve();
						return;
					}
					uni.createSelectorQuery().in(this).select('.tabs-item').fields({
						dataset: true,
						size: true,
					}, res => {
						if (res) {
							this.swiperWidth = res.width;
						}
					}).exec();
					uni.createSelectorQuery().in(this).selectAll('.tab-item').boundingClientRect(rects => {
						this.tabListSize = rects;
						resolve();
					}).exec();
				});
			},
			updateLineLeft() {
				
				if (this.isScroll && this.tabListSize.length > 0) {
					let currentSize = this.tabListSize[this.value];
					let tabWid = currentSize.left + currentSize.width / 2.0;
					this.lineLeft = tabWid + 'px';
					console.log("qxj isScroll updateLineLeft value:"+this.lineLeft);
				} else {
					this.lineLeft = 100 / this.tabs.length * (this.value + 1) - 100 / (this.tabs.length * 2) + '%';
					console.log("qxj  updateLineLeft value:"+this.lineLeft);
				}
			}
		},
		mounted() {
			this.updateTabs();
		}
	}
</script>




<style lang="scss">
	.me-tabs{
		position: relative;
		font-size: 28rpx;
		background-color: #fff;
		border-bottom: 0rpx solid #eee;
		box-sizing: border-box;
		overflow-y: hidden;
		background-color: #fff;
		&.tabs-fixed{
			z-index: 990;
			position: fixed;
			top: var(--window-top);
			left: 0;
			width: 100%;
		}
		&.tabs-fixed1{
			z-index: 990;
			position: fixed;
			top: 80;
			left: 0;
			width: 100%;
		}
	
		.tabs-item{
			position: relative;
			white-space: nowrap;
			padding-bottom: 30rpx; // 撑开高度,再配合me-tabs的overflow-y: hidden,以达到隐藏滚动条的目的
			box-sizing: border-box;
			.tab-item{
				position: relative;
				text-align: center;
				box-sizing: border-box;
				padding-left: 20rpx;
				padding-right:20rpx;
				color:#333;
				font-size: 32rpx;
				&.active{
					font-weight: bold;
					color: #FF5C03;
				}
			}
		}
		
		// 平分的方式显示item
		.tabs-flex{
			display: flex;
			.tab-item{
				flex: 1;
			}
		}
		// 居左显示item,支持水平滑动
		.tabs-scroll{
			.tab-item{
				display: inline-block;
			}
		}
		
		// 选中tab的线
		.tabs-line{
			z-index: 1;
			position: absolute;
			bottom: 32rpx; // 至少与.tabs-item的padding-bottom一致,才能保证在底部边缘
			width: 50rpx;
			height: 6rpx;
			transform: translateX(-50%);
			border-radius: 4rpx;
			transition: left .3s;
			background: #FF5C03;
		}
	}
</style>