解决uni-app中的uni-table表格表头不能固定的问题

前言：

解决uni-table表格表头不能固定的问题

使用uniapp内置组件 movable-view和movable-area实现表格缩放

话不多说，上代码：

HTML代码：

<movable-area scale-area>
			<movable-view y="10" style="height:10px;" direction="horizontal" scale scale-min="1" scale-max="4">
				<view class="uni-container">
					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
						<view class="tableHead">
							<uni-tr>
								<uni-th align="center">
									<view style="width:150px;">时间(时刻，小时)</view>
								</uni-th>
								<uni-th align="center">
									<view style="width:150px;">呼入数量</view>
								</uni-th>
								<uni-th align="center">
									<view style="width:150px;">呼入接通数量</view>
								</uni-th>
								<uni-th align="center">
									<view style="width:150px;">角色呼入接通百分比</view>
								</uni-th>
								<uni-th align="center">
									<view style="width:150px;">呼入未通数量</view>
								</uni-th>
								<uni-th align="center">
									<view style="width:150px;">呼入未通百分比</view>
								</uni-th>
							</uni-tr>
						</view>
						<view class="tableBody" style="margin-top: 60rpx;">
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.hour}}</view>
								</uni-td>
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.in_call_num}}</view>
								</uni-td>
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.in_talked_num}}</view>
								</uni-td>
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.in_not_talked_num}}%</view>
								</uni-td>
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.in_talked_bili}}</view>
								</uni-td>
								<uni-td>
									<view style="width:150px;text-align:center;">{{item.in_not_talked_bili}}%</view>
								</uni-td>
							</uni-tr>
						</view>
					</uni-table>
				</view>
			</movable-view>
		</movable-area>

CSS代码:

movable-view {
		display: flex;
		width: auto;
		height: auto;
		min-width: 100%;
	}

	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: scroll;
	}

	/* //表头固定样式 */
	.tableHead {
		font-weight: bold;
		color: #333333;
		background: #F4F6FF;
		z-index: 20;
		position: fixed;
		top: -20rpx;
	}

	.tableBody {
		height: 1800rpx;
		overflow: scroll;
		margin-top: 42px;
	}

要点说明：

1. tableBody的margin-top值为你的表头高度
2. movable-view一定要设置高度，不然缩放过程中，会导致表头超出缩放区域，达不到固定表头的效果
3. th 和td 中间一定要加view 撑开宽度，来达到表头和表体单元格宽度一致的效果
4. direction要设置为horizontal，横向的，否则表格会随手指滑动上下移动