uni-app选项卡

<template>
	<view class="Text_box">
	<view class="horizonal-tab">
		<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
			<block v-for="(item, index) in subjList" :key="index">
				<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index, item)">
					{{ item.name }}
					<view class="scroll-tab-line">
						<!-- aaa -->
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
	<view class="container">
		{{tabIndex}}
	</view>
	</view>
</template>

<script>
	import {
	myAchs
	} from '@/apis/home'
	export default {
		data(){
			return{
				tabIndex:0,
				subjList:[
					{id:1,name:'语文'},
					{id:2,name:'数学'},
					{id:3,name:'英语'},
					{id:4,name:'化学'},
					{id:5,name:'地理'},
					
					
				]
			}
		},methods:{
			//切换选项卡
			toggleTab(index, item) {
				this.tabIndex = index
				this.gradeIddata = item.id
				console.log(index)
			},
			getList(){
				
				console.log('888888888888666')
				 this.uniRequestFunc({
				        url: myAchs,
				        method: 'GET',
				        success: ({ code, data }) => {
				          if (code === 0) {
				            console.log('🚀 ~ 成绩 ~ data', data)
				          }
				        },
				      })
			}
		},onLoad() {
			
		},onShow() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.horizonal-tab {
		line-height: 80rpx;
		// background-color:#13C2FB ;
		// opacity:0.2;
	}
	
	.horizonal-tab .active {
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		// border-bottom: 1rpx solid #eee;
		text-align: center;
	}
	
	.scroll-tab-item {
		color: #333333;
		display: inline-block;
		font-size: 30rpx;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
	}
	
	.active .scroll-tab-line {
		font-size: 32rpx;
		margin-top: 20rpx;
		border-bottom: 5rpx solid #01B2FF;
		border-top: 5rpx solid #01B2FF;
		border-radius: 20rpx;
		width: 70rpx;
	}
	
</style>