uniapp中的顶部滑块

<template>
	<!-- 滑块 -->

	<view class="index">
		<scroll-view scroll-x="true" :scroll-into-view="scrollIntoIndex" class="scroll-content">
			<view :id="'top' + index" class="scroll-item" v-for="(item, index) in topBar" :key="index" @tap="changeTab(index)">
				<text :class="topBarIndex === index ? 'f-active-color' : 'f-color'">{{ item.name }}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTab" :current="topBarIndex">
			<swiper-item v-for="(item, index) in topBar" :key="index">
				<view>{{ item.name }}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			// 模拟数据
			// 选中的索引
			topBarIndex: 0,
			// 顶栏跟随的索引id值
			scrollIntoIndex: 'top0',
			// 顶栏数据
			topBar: [{ name: '推荐' }, { name: '运动户外' }, { name: '服饰内衣' }, { name: '鞋靴箱包' }, { name: '美妆个护' }, { name: '家居数码' }, { name: '食品母婴' }]
		};
	},
	onLoad() {},
	methods: {
		changeTab(index) {
			if (this.topBarIndex === index) {
				return;
			}
			this.topBarIndex = index;
			this.scrollIntoIndex = 'top' + index;
		},
		onChangeTab(e) {
			this.changeTab(e.detail.current);
		}
	}
};
</script>

<style>
.scroll-content {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item {
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 32rpx;
}
.f-active-color {
	padding: 10rpx 0;
	border-bottom: 6rpx solid #49bdfb;
}
.index {
	width: 100%;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>