ROBOT-APP/code/HBX/components/tabs.vue

<template>
	<view class="tabs-n">
		<view class="h-tab">
				<view class="tab-1 " v-for="(item,index) in arrList" :key="item.key" :class="{'active':item.active}"
					@click="changeItem(index)">
					<text class="text1">{{item.name}}</text>
				</view>
			
		</view>
		<view class="h-content">
			<view v-show="activeIndex == 0">
				<slot name="slot1">
				</slot>
			</view>
			<view v-show="activeIndex == 1">
				<slot name="slot2">
				</slot>
			</view>
			<view v-show="activeIndex == 2">
				<slot name="slot3">

				</slot>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
		},
		mounted() {
			this.arrList = this.list
		},
		data() {
			return {
				activeIndex: 0,
				arrList:[],
			}
		},
		methods: {
			swiperChange(e) {
				this.arrList.map(e => e.active = false)
				this.activeIndex = e.target.current
				this.arrList[e.target.current].active = true
			},
			changeItem(index) {
				this.arrList.map(e => e.active = false)
				this.arrList[index].active = true
				this.activeIndex = index
				this.$emit('changeTab', index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs-n {
		.h-tab {
			display: flex;
			z-index: 0;
			width: 100vw;
			border: 1px solid #0c79cc;

			.active {
				color: #fff;
				background: #0c79cc !important;
			}

			.tab-1 {
				background: #fff;
				padding: 12rpx 0px;
				flex: 1;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text1 {
					text-align: center;


				}
			}
		}

		.h-content {
			min-height: calc(100vh - 80rpx);

			.swiper {
				min-height: calc(100vh - 80rpx);

				.swiperItem {}
			}
		}
	}
</style>