vant-实现滑动变化标签，

1

• 需要三个页面，一个主页面，两个组件，
• 当滑动的时候会判断组件，然后显示不同的组件
• 直接复制粘贴即可，我使用的是vant-ui库

主页面

<script setup>
	import xiangQing from './xiangQing.vue';
	import liShi from './liShi.vue';
	// 滑动标签

	import {
		ref
	} from 'vue';
	const title = ref(["详情", "历史", ])
</script>

<template>
	<view class="v">

		<view class="v1">
			<!-- 文字介绍 -->
			<view class="v21">

			</view>
		</view>
		<hr />
		<view class="v2">
			<van-tabs v-model:active="active" swipeable>
				<!-- <van-tab v-for="index in 4" :title="'选项 ' + index"> -->
				<van-tab v-for="item in title" :title="item">
					<xiangQing v-if="item=='详情'"></xiangQing>
					<liShi v-if="item=='历史'"></liShi>
					{{item}}
				</van-tab>
			</van-tabs>




		</view>


	</view>

</template>


<style lang="less" scoped>
	.v2{
		// background: #00ff7f;
		// height
	}

</style>

第一个组件

<script setup>

</script>

<template>

	<h1>哈哈哈</h1>

	<view class="v">
		<view class="v1">
			<!-- 介绍 -->

			<!-- 轮播图 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item>
					<image src="../../../static/logo.png" mode=""></image>
				</van-swipe-item>
				<van-swipe-item>
					<image src="../../../static/logo.png" mode=""></image>
				</van-swipe-item>
			</van-swipe>
		</view>
	</view>
</template>


<style lang="less" scoped>
	.v{
		height: 100vh;
		background: red;
	}

</style>

第二个组件

<script setup>

</script>

<template>
	<view class="v">
		<h1>历史</h1>
	</view>
</template>


<style lang="less" scoped>
	.v {
		height: 100vh;
		background: #aaaaff;
	}
</style>