小程序移动端 uniapp 排课表 表头固定第一列固定 跟随表体移动

直接代码 着急摸鱼

<template>
	<view class="schedule-container">
		<view style="display: flex;">
			<view class="time-col"></view>
			<scroll-view class="header-scroll" :scroll-left="scrollLeft" scroll-x>
				<view class="header-row">
					<view class="course-col" v-for="(course, index) in courses" :key="index">
						{{ course }}
					</view>
				</view>
			</scroll-view>
		</view>

		<scroll-view class="schedule-scroll" scroll-x scroll-y @scroll="onScheduleScroll">
			<view class="schedule-body">
				<view class="schedule-row" v-for="(timeSlot, index) in timeSlots" :key="index">
					<view class="time-col">
						{{ timeSlot }}
					</view>
					<view class="course-col" v-for="(course, index) in courses" :key="index">
						<view style="height: 100rpx;">{{ course }}1</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courses: ['课程1', '课程2', '课程3', '课程4', '课程5'],
				timeSlots: ['时间段1', '时间段2', '时间段3', '时间段4', '时间段5', '时间段5', '时间段5'],
				scrollLeft: 0
			};
		},
		methods: {
			onScheduleScroll(event) {
				this.scrollLeft = event.detail.scrollLeft;
			}
		}
	};
</script>

<style>
	.schedule-container {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.header-scroll {
		height: 100px;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.schedule-scroll {
		flex: 1;
		overflow: auto;
	}

	.schedule-body {
		width: max-content;
		white-space: nowrap;
		position: static;
		left: 0;
		top: 100rpx;
	}

	.header-row,
	.schedule-row {
		height: 100%;
		display: flex;
	}

	.time-col,
	.course-col {
		flex: none;
		width: 150px;
		border: 1px solid #ccc;
		padding: 10px;
		text-align: center;
	}

	.time-col {
		background-color: #f5f5f5;
	}

	/* .header-row .time-col {
		width: 150px;
		position: sticky;
		left: 0;
		top: 0;
		background-color: #f5f5f5;
		z-index: 2;
	} */

	.header-row .course-col {
		position: sticky;
		top: 0;
		background-color: #f5f5f5;
		z-index: 1;
	}

	.schedule-row .time-col {
		position: sticky;
		left: 0;
		top: 100rpx;
		height: auto;
		min-height: 100px;
		background-color: #f5f5f5;
		overflow-y: auto;
	}
</style>