uniapp导航栏切换且滑动

<template>
	<view>
		我的
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIintoIndex">
			<view :id="'top' + index" v-for="(item,index) in topBar" :key="index" class="scroll-item" @tap="changeTabIndex(index)">
				<text :class="topBarIndex === index ? 'f-active-color' : 'f-color'">{{item.name}}</text>
			</view>
		</scroll-view>
		<!--   -->
		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:' + clentHeight + 'px;'">
			<swiper-item v-for="(item,index) in topBar" style="animation-delay: 2s;">
				<view class="swiper-item" v-if="topBarIndex === 0">
					<Card cardTitle="你好列表"></Card>
					<Banner></Banner>
					<Icons></Icons>
					<Card cardTitle="热销爆品"></Card>
					<Hot></Hot>
				</view>
				<view class="swiper-item" v-if="topBarIndex === 1">
					<Icons></Icons>
					<Card cardTitle="热销爆品"></Card>
					<Hot></Hot>
				</view>
				<view class="swiper-item" v-if="topBarIndex === 3">
					<Card cardTitle="你好列表"></Card>
					<Banner></Banner>
					<Icons></Icons>
					<Card cardTitle="热销爆品"></Card>
					<Hot></Hot>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Card from '@/components/common/Card.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	export default {
		components:{
			Card,
			Banner,
			Icons,
			Hot,
		},
		data() {
			return {
				// 选中的索引
				topBarIndex: 0,
				scrollIintoIndex:'top0',
				
				// 获取内容高度
				clentHeight:'',
				// 数据
				topBar:[
					{name:'推荐'},
					{name:'关注'},
					{name:'体育'},
					{name:'热点'},
					{name:'财经'},
					{name:'娱乐'},
					{name:'历史'},
					{name:'家具数码'},
				]
			}
		},
		onLoad() {
			if(!uni.getStorageSync('token_aianxing')) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		onReady() {
			let view = uni.createSelectorQuery().select(".swiper-item")
			view.boundingClientRect(data => {
				this.clentHeight = data.height
			}).exec();
		},
		methods: {
			// 推荐切换
			changeTabIndex(index) {
				if(this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index
				this.scrollIintoIndex = 'top' + index
			},
			// 内容切换
			onChangeTab(e) {
				this.changeTabIndex(e.detail.current)
			}
		}
	}
</script>

<style lang="scss" scoped>
.scroll-content {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
	animation-delay: 2s;
	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 36rpx;
		animation-delay: 2s;
	}
	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid ;
		animation-delay: 2s;
	}
}
</style>