横向菜单滚动vue3

直接新建一个页面，然后根据自己的需求该样式就行

<template>
	<div class="navbar-list">
		<div class="flex-imd" id="flexImd">
			<div
				v-for="(item, index) in courseTypeList"
				:key="index"
				class="navbar-item"
				:class="currNavbar === index ? 'act' : 'nol'"
				@click="chooseNav(index)"
			>
				<img :src="item.typeLogo" alt="" class="navbar-item-img" style="pointer-events: none" />
				{{ item.typeName }}
			</div>
		</div>
	</div>
</template>
 
<script setup>
const currNavbar = ref(0)
const courseTypeList = ref([
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' },
	{ typeName: '测试标题001', typeLogo: 'imgurl' }
])
const chooseNav = (index) => {
	currNavbar.value = index
	const item = document.querySelectorAll('.navbar-item')[index]
	const container = document.querySelector('#flexImd')
	const scrollLeft = item.offsetLeft - (container.offsetWidth - item.offsetWidth) / 2
	container.scrollTo({
		left: scrollLeft,
		behavior: 'smooth'
	})
}
</script>
 
<style>
.flex-imd {
	overflow: hidden;
	display: flex;
	overflow-x: scroll;
	padding: 0;
}
.flex-imd::-webkit-scrollbar {
	display: none;
}
.navbar-list {
	/* width: 50%; */
	padding: 10px;
}
.navbar-item {
	width: max-content;
	white-space: nowrap;
	padding: 0px 18px;
	margin: 0px 5px;
	box-sizing: border-box;
	height: 30px;
	display: flex;
	border-radius: 15px;
	color: white;
	font-weight: 900;
	font-size: 12px;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.navbar-item-img {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
.navbar-list::-webkit-scrollbar {
	display: none;
}
.navbar-item.act {
	/* background: #c30f20; */
}
.nol {
	background: #999999;
}
</style>