hotelHomestayWx/components/TopTabs/TopTabs2.vue

<template>
	<view class="tb" :style="{'top':top+'px'}">
		<view class="tabs">
			<view v-for="(item,index) in list" :key="index" @tap="changeTab(index)">
				<text :class="index==current?'active':''">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'topTabs',
		props: {
			list: {
				typeof: Array,
				default: []
			},
			top: {
				typeof: Number,
				default: 0
			},
			placeholder: {
				typeof: String,
				default: ""
			},
			showSearch: {
				typeof: Boolean,
				default: true
			}
		},
		data() {
			return {
				current: 0,
				mysearch: ''
			}
		},
		methods: {
			sousuo() {
				this.$emit('sousuo', this.mysearch);
			},
			changeTab(index) {
				this.current = index;
				this.$emit('changeTab', index);
			}
		}
	}
</script>

<style lang="less">
	.tb {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		.searchBoxParent {
			width: 100%;
			background: #fff;
			padding: 20rpx 24rpx 6rpx;
			box-sizing: border-box;

			.searchBox {
				width: 100%;
				background-color: #fff;
			}
		}

		.tabs {
			background: #fff;
			padding: 26rpx 0;
			display: flex;
			align-items: center;
			width: 100%;

			&>view {
				width: 50%;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
				line-height: 40rpx;
				position: relative;
				text-align: center;
			}

			.active {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #0DBFFD;
				line-height: 45rpx;
			}

			.active::after {
				position: absolute;
				content: '';
				width: 84rpx;
				height: 8rpx;
				background: #0DBFFD;
				bottom: -26rpx;
				left: 50%;
				margin-left: -42rpx;
			}
		}
	}
</style>