jiangximiniprogramSchool/components/scrollNav/scrollNav.vue

<template>
	<scroll-view class="scroll-view_w" scroll-x="true"  scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
		<view class="tabs">
			<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item.id)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
			<view class="rightPad"></view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: ['tabData', 'currentTab'],
		methods: {
			changeTab(id) {
				this.$emit('changeTab', id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_w {
		width: 100%;
		margin: 30rpx  0 40rpx 0;
		.tabs {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 0rpx 10rpx 32rpx;
			width: auto;
			.tab {
				width: 108rpx;
				height: 60rpx;
				border-radius: 8rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				margin-right: 28rpx;
				flex-shrink: 0;
		
				&.active {
					background-color: #fff;
					color: $themC;
				}
		
				&.all {
					width: 96rpx;
				}
			}
			.rightPad {
				min-width: 10rpx;
				height: 60rpx;
				
			}
		}
	}
</style>