枯木逢春网

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

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

效果图

表头固定,微信可缩放效果

前言

用到的小程序u现组件:
使用uniapp内置组件 movable-view和movable-area实现表格缩放
使用uni-table 实现表格渲染(自带多选,没有头固定功能)

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

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

失败告终

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

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

话不多说,上代码:

html文件

姓名部门职位角色操作{ item.realname}}{ item.name}}{ item.post || ''}}{ item.roleName}}

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,横向的,否则表格会随手指滑动上下移动,这不是我要的效果

最后是不是很简单。

未经允许不得转载:枯木逢春网 » uniapp 微信小程序 ui-table 表头固定,可缩放,实现