travel-applet/components/tabs/index.vue

<template>
	<view class="tabs">
		<view class="one" :style="{background:tabs.bgColor||'#f9f9f9'}">
			<scroll-view class="scrollView" scroll-x="true">
				<view class="list" v-for="(item,index) in tabs.menu" :key="index"
					:style="{background:tabs.active==item.active?tabs.acbgColor||'#ffffff':''}"
					@tap="tabsChange(index,item)">
					<text :class="[tabs.active==item.active?'active_1':'active_2']">{{item.title}}</text>
				</view>
			</scroll-view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			tabs: {
				type: Object,
			},

		},
		data() {
			return {};
		},
		methods: {
			tabsChange(index, item) {
				const that = this;
				that.$emit('tabsChange', item)
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		.one {
			padding: 2vw;

			.scrollView {
				display: flex;
				white-space: nowrap;
				text-align: center;
			}

			.list {
				display: inline-block;
				padding: 2vw;
				margin: 0 1.5vw;
				text-align: center;
				border-radius: 5px;

				.active_1 {
					color: #000000;
					border-bottom: 4px solid #87CEFA;
					border-radius: 5px;
				}

				.active_2 {
					color: #999999;
				}

				text {
					font-weight: bold;
					font-size: 14px;
				}
			}
		}
	}
</style>