food_wechat/pages/main/order.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- tab -->
		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
				:class="current===index?'fb':''">
				{{tab}}
			</view>
		</view>
		<!-- tabLine -->
		<view class="tabLineBox flex mac mc" :style="{ left: tabLineLeft + 'rpx' }">
			<view class="tabLine rad8 bg-m"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['待支付', '已付款', '退款售后'], // tab标签
				current: 0, //当前激活标签
				tabLineLeft: 24 //tabLine 样式表的left值
			}
		},
		methods: {
			handlerTab(index) {
				this.current = index
				// 计算每个 tabLine 的left值
				const tabWidth = 200
				const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
				1) // 750是屏幕宽度，48是左右边距
				this.tabLineLeft = 24 + index * (tabWidth + spacing) // 计算新的 left 值
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabListBox {
		height: 77rpx;
	}

	.tabBox {
		width: 200rpx;
		height: 77rpx;
	}

	.tabLineBox {
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		transition: all .5s ease;
	}

	.tabLine {
		width: 70rpx;
		height: 8rpx;
	}
</style>