uni-app框架，uni-table组件表头固定 position: sticky

在项目开发中，我们经常遇到需要固定某一部分重要数据，如表头、菜单等

• position:sticky可以简单理解为是static和fixed的结合；
• 可理解为在父元素滑动过程中，子元素距离其父元素的距离达到 sticky 粘性定位的要求时(如top：40px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

position: sticky粘性/悬浮定位（生效条件）

1. 必须添加 top, left, right, bottom 其中一个才有效
2. 父元素不能 overflow: auto|scroll|hidden，必须 overflow: visible
3. 父元素高度必须大于 sticky元素高度

‌uni-table‌是uni-app框架中的一个组件，用于在应用中展示表格数据。它支持多种功能，包括动态绑定数据、设置表格样式、添加交互功能等。

这个组件使用非常方便，使用的频率也非常的高，但是它淌有固定表单的功能，这个问题在一个项目困扰了我很久，找了官方issue，一直没有找到方案。

终于皇天不久苦心人，终于找到了解决方案。费话不多说了，直接上代码。

<template>
	<view class="table-container">
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" type="selection">
			<uni-tr class="head">
				<uni-th width="150" align="center">日期</uni-th>
				<uni-th width="150" align="center">姓名</uni-th>
				<uni-th align="center">地址</uni-th>
				<uni-th width="204" align="center">设置</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>{{ item.date }}</uni-td>
				<uni-td>
					<view class="name">{{ item.name }}</view>
				</uni-td>
				<uni-td align="center">{{ item.address }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary">修改</button>
						<button class="uni-button" size="mini" type="warn">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				tableData: [],
			}
		},
		onShow() {
			const result = [];
			for (let i = 0; i < 100; i++) {
				result.push({
					date: new Date().toISOString(),
					name: '张三',
					address: '邵阳',
				})
			}
			this.tableData = result;
		}
	}
</script>

<style lang="scss">
	.table-container {
		height: 400px;
		overflow-y: auto;

		::v-deep .uni-table .head th {
			position: sticky;
			top: 0;
			z-index: 2;
			background-color: #fff;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>

其实position: sticky 这个使用非常简单，就是使用一些开源组件的时间需要注意父元素的有没有设置overflow: auto|scroll|hidden，uni-table-scroll就设置，所以粘性/悬浮定位不能生效，也很容易被忽略掉。

css3新属性 position: sticky，实现粘性定位