uniapp实现首行首列冻结效果

<template>
	<view class="height800 flex-column absolute bgc-withe">

		<!-- 第一行 -->
		<view class="flex diy-header">
			<view class="box">时间</view>
			<scroll-view id="1" enable-flex="true" scroll-x="true" :scroll-left="scrollLeft" class="diy-header-title flex relative scroll-view-x"
				ref="xScroll" @scroll="handleScrollX">
				<view class="box" v-for="(colum,indexItem) in colums" :key="indexItem">{{colum}}</view>
			</scroll-view>

		</view>
		<!-- 下面整块 -->
		<view class="flex diy-body">
			<view class="flex">
				<scroll-view id='timesColum' scroll-y="true" :scroll-top="scrollTop" show-scrollbar=false class="flex-column scroll-view-y" ref="yScroll"
					@scroll="handleScrollY">
					<view class="box" v-for="(time,index) in times" :key="index">{{time}}</view>
				</scroll-view>
				<scroll-view scroll-y="true" :scroll-top="scrollTop" id="timesAndDateColum" class="flex-column scroll-view-y" ref="yScroll"
					@scroll="handleScrollY">
					<scroll-view enable-flex="true" scroll-x="true" :scroll-left="scrollLeft" class="flex diy-body-row scroll-view-x"
						ref="xScroll" @scroll="handleScrollX" v-for="(time,index) in times" :key="index">
						<view class="box" v-for="(colum,indexItem) in colums" :key="indexItem" :class="{'active':activeTimeAndColum===`${index}-${indexItem}`}" @click="selectTimeAndColum(index,indexItem)">{{time}}--{{colum}}
						</view>
					</scroll-view>
				</scroll-view>
			</view>


		</view>




	</view>
</template>

<script>
	export default {
		data() {
			const colums = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8'];
			const times = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00',
				'19:00', '20:00'
			];
			const scrollTop=0;
			const scrollLeft=0;
			const activeIndex=-1;
			const activeIndexItem=-1;
			const activeTimeAndColum='';
			
			return {
				//时间列
				times,
				//场馆列
				colums,
				// 竖直滚动条位置 :scroll-top="scrollTop"动态绑定属性，调整位置，所有的竖直滚动条会跟着一起变化
				scrollTop,
				// 水平滚动条位置
				scrollLeft,
				//激活的时间索引列
				activeIndex,
				//激活的场馆索引列
				activeIndexItem,
				//标记元素的唯一标识
				activeTimeAndColum
			}
		},
		methods: {
			handleScrollX(e) {
				this.scrollLeft=e.detail.scrollLeft
			},
			handleScrollY(e) {
				this.scrollTop=e.detail.scrollTop
			},selectTimeAndColum(index,indexItem){
				this.activeIndex=index;
				this.activeIndexItem=indexItem;
				this.activeTimeAndColum=index+'-'+indexItem;
			}
		}
	}
</script>

<style>
	.height800 {
		height: 800rpx;
	}

	.flex {
		display: flex;
		overflow-x: auto;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	#timesColum {
		width: 198rpx;
	}

	.box {
		width: 150rpx;
		height: 100rpx;
		line-height: 100rpx;
		border: 1rpx soild black;
		text-align: center;
		/* 不伸缩，固定宽度 */
		flex: 0 0 auto;
	}

	.absolute {
		position: absolute;
	}

	.relative {
		position: relative;
	}

	.diy-header {
		position: relative;
		left: 0rpx;
		top: 0rpx;
		/* 不伸缩，固定宽度 */
		flex: 0 0 auto;
	}

	.diy-header-title {
		width: 450rpx;
	}

	.diy-body-row {
		/* 不伸缩，固定宽度 */
		flex: 0 0 auto;
		width: 450rpx;
	}

	.diy-body {
		position: relative;
		top: 0rpx;
		left: 0rpx;
	}

	.bgc-withe {
		background-color: #ffffff;
	}

	scroll-view.flex {
		height: 100rpx !important;
	}
	::-webkit-scrollbar{
		/* 隐藏滚动条 */
		display: none;
	}
	.box.active{
		background-color: #4CAF50;
		color: #ffffff;
	}
</style>