本案案例基于 WePY 实现,大家可根据自身需要进行更改扩展。
演示
实现原理
- 橙色和紫色区域组成了横向滚动的
scroll-view
。 - 红色虚线区域是纵向滚动的
scroll-view
。但由于绿色区域设置了pointer-events: none;
,即实际只能触摸橙色区域。通过在橙色区域绑定的scroll
事件(纵向),实时设置绿色虚线区域的scrollTop
。 - 紫色区域是固定头部,绿色区域是固定列。左上角的绿色区域是横向与纵向共同固定的区域。
实现要点
- 绑定了
scroll
事件的scroll-view
要指定throttle: false
,否则回调函数有可能取不到最终位置的scrollTop
值。官方文档目前未提及此属性,参考资料>>。 - 固定列需要设置
pointer-events: none;
,实现点击穿透。使得tbody
能触发scroll
事件,而不是为固定列也绑定scroll
事件。 - 找出每列的最大单元格作为该列的宽度,当然你也可以显示设置。
peace out!👋
小程序 Bug
2019.09.03 更新
当将该组件至于 Popup 弹框,且该弹框通过 visibility: hidden/visible
切换,那么在 iOS 中,会使固定列(.table__fixed-columns
)的 pointer-events: none
失效。
通过scroll-top来控制两边的联动,是怎么做到没有延迟的?我用相同的法子实现有延迟的啊/(ㄒoㄒ)/~~
能指导一下怎么用吗
组件已使用,有个问题请教一下,打开页面,手机上表格样式出不来,数据出不来,打开调试没有报错,然后界面就好了。请问是什么原因
不错,先收藏
能不能搞个基于原生的呀?不用 WePY
不错,先收藏