JiangxiMiniProgram/pages/mineEntry/carLearProgress/carLearProgress.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="学车进度"></topNavbar>
		<scroll-view class="scroll-view_w" scroll-x="true" @scroll="scroll"  scroll-with-animation :scroll-into-view="'tab'+currentTab" >
			<view class="tabs">
				<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
				<view class="rightPad"></view>
			</view>
		</scroll-view>
		<view class="pad learnStatus">
			<view class="card">
				<view class="flex-b">
					<view class="lab">模拟器训练学时报审</view>
					<view class="date">2023/08/09 22:52:12</view>
				</view>
				<view class="flex-b bg">
					<view class="row">
						<view class="text">评价模拟器教学老师</view>
						<view class="btn" @click="$goPage('/pages/carEntry/evaluate/evaluate')">去评价</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">模拟器训练已预约</view>
					<view class="date">2023/08/09 22:52:12</view>
				</view>
				<view class="bg">
					<view class="row">
						<view class="text">模拟驾驶馆：某某模拟驾驶馆</view>
					</view>
					<view class="row">
						<view class="text">模拟器编号：00001</view>
					</view>
					<view class="row">
						<view class="text">预约时间：2023/08/23 10:00:00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [{
						text: '全部',
						id: 10
					},
					{
						text: '模拟器',
						id: 0
					},
					{
						text: '科目一',
						id: 1
					},
					{
						text: '科目二',
						id: 2
					},
					{
						text: '科目三',
						id: 3
					},
					{
						text: '科目四',
						id: 4
					},
				],
				currentTab: -1,
			}
		},
		methods: {
			scroll(e) {
				console.log(e)
			},
			changeTab(val) {
				this.currentTab = val.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../tabbar/learnCar/comp/comp.scss';
	.scroll-view_w {
		width: 100%;
		.tabs {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 0rpx 0 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;
				
			}
		}
	}
	
	.learnStatus {
		margin-top: 24rpx;
	}
</style>