直接代码 着急摸鱼
<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 .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>