wchy/HX-SHOP/pages/market/market.vue

<template>
	<view class="content">
		<view class="head">
			<view class="status"></view>
			<view class="search" @click="goSearch">
				<i class="hxicon-search"></i>
				<text class="tit">搜索店铺</text>
			</view>
		</view>
		<view class="tabs-box">
			<view class="hx-tabs">
				<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i"
					:class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)"
					:style="{transition: transtionTime + 'ms'}">
					<text>{{item.name}}</text>
				</view>
				<view class="hx-tabs-slider-box"
					:style="{width: (100/tabs.length) + '%',transition: transtionTime + 'ms',left:swiperCurrentSliderLeft + '%'}">
					<view class="hx-tabs-slider"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperCurrent: 0,
				transtionTime: 100,
				swiperCurrentSliderLeft: 0,
				tabs: [{
						name: '综合推荐',
						data: [],
						api: '',
						load: false
					},
					{
						name: '距离优先',
						data: [],
						api: '',
						load: false
					},
				],
			}
		},
		methods: {
			swiperChange(index) {
				this.swiperCurrent = index;
				this.swiperCurrentSliderLeft = (100 / this.tabs.length) * index;
				let url = this.tabs[index].api;

				// index 0全部，1待支付，2待收货，3待评价，4退款
				// 假如滑动了tab则 去获取对应的数据
				if (this.tabs[index].data.length == 0) {
					// 只获取一次数据
					// this.getOrderData(index)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.head {

		background: linear-gradient(100deg, #FFEB3B, #FFC107);
		padding-bottom: 10px;
		padding-top: 10px;

		.status {
			height: var(--status-bar-height);
		}

		.search {
			height: 40px;
			background-color: #fff;
			border-radius: 10px;
			margin: 0 15px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			font-size: 14px;
			color: #888;

			i {
				font-weight: bold;
				font-size: 16px;
			}

			.tit {
				margin-left: 6px;
			}
		}
	}

	.tabs-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: sticky;
		top: calc(44px + var(--status-bar-height));
		z-index: 10;
		background-color: white;
		height: 50px;
		padding-bottom: 10px;

		.hx-tabs {
			position: relative;
			display: flex;
			height: 100%;
			width: 100%;
			justify-content: space-evenly;

			&-item {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 70px;
				color: #666666;

				text {
					font-size: 16px;
				}

			}

			&-active {
				color: #333333;
				font-weight: bold;
			}

			&-slider-box {
				position: absolute;
				display: flex;
				justify-content: center;
				bottom: 0;
				width: 20%;
			}

			&-slider {
				display: flex;
				background: #f6d200;
				width: 30px;
				height: 3px;
			}
		}
	}
</style>