uniapp 微信小程序 ui-table 表头固定，可缩放，实现

效果图

表头固定，可缩放效果

前言

用到的组件：
使用uniapp内置组件 movable-view和movable-area实现表格缩放
使用uni-table 实现表格渲染（自带多选，没有头固定功能）

开始探索
实现表头固定功能，看到网上使用sticky定位封装table组件，需要自己另外实现多选等一些事件监听功能，单元格动态设置高度。可是我想偷懒，并且现在情况就是我不偷懒尝试去实现
还是会遇到如下一些问题

情况一：表头和表体分开控制，表体进行缩放，列头名称和列数据不能一一对应，左右拖动和缩放表体过程中会导致表头名称与表体数据不对应的问题。并且由于手机宽度有限，用户要单独左右滑动才能看到全部表头内容
情况二：表头和表体一起控制，一起缩放。列头名称和列数据才能一一对应，缩放过程中会导致表头不能固定，达不到表头固定效果。

失败告终

别灰心我们自己来研究，哈哈哈哈

最终我花了三四天终于改出来了，发现自己之前走了太多弯路，简直太low了，缘来如此简单，根本不需要自己去重新手写table,也免去了重新做多选的功能

话不多说，上代码：

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="userLoading" 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:204px;">操作</view></uni-th></uni-tr></view><view  class="tableBody" style="margin-top: 27px;"><uni-tr v-for="(item, index) in tableData" :key="index"><uni-td><view style="width:150px;">{{item.realname}}</view></uni-td><uni-td><view style="width:150px;">{{item.name}}</view></uni-td><uni-td><view style="width:150px;">{{item.post || ''}}</view></uni-td><uni-td><view style="width:150px;">{{item.roleName}}</view></uni-td><uni-td><view class="uni-group" style="width:204px;"><button class="uni-button" size="mini" type="warn" @click="handleDel(item.userId)">删除</button></view></uni-td></uni-tr></view></uni-table><view class="uni-pagination-box" style="display:inline-block;margin-left:100px"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view></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:0;}.tableBody{height: 500px;overflow: scroll;margin-top:42px;}

要点说明：

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

最后是不是很简单。