评论

分享一个固定头和列的 table 组件的简单实现

基于 WePY 实现的固定头和列的 table 组件,可根据自身需求进行修改扩展。源码:https://github.com/JChehe/mini-program-table

本案案例基于 WePY 实现,大家可根据自身需要进行更改扩展。

代码地址>>

演示

演示视频地址>>

实现原理

  1. 橙色和紫色区域组成了横向滚动scroll-view
  2. 红色虚线区域是纵向滚动scroll-view。但由于绿色区域设置了 pointer-events: none;,即实际只能触摸橙色区域。通过在橙色区域绑定的 scroll 事件(纵向),实时设置绿色虚线区域的 scrollTop
  3. 紫色区域是固定头部,绿色区域是固定列。左上角的绿色区域是横向与纵向共同固定的区域。

实现要点

  1. 绑定了 scroll 事件的 scroll-view 要指定 throttle: false,否则回调函数有可能取不到最终位置的 scrollTop 值。官方文档目前未提及此属性,参考资料>>
  2. 固定列需要设置 pointer-events: none;,实现点击穿透。使得 tbody 能触发 scroll 事件,而不是为固定列也绑定 scroll 事件。
  3. 找出每列的最大单元格作为该列的宽度,当然你也可以显示设置。

peace out!👋

小程序 Bug

2019.09.03 更新
当将该组件至于 Popup 弹框,且该弹框通过 visibility: hidden/visible 切换,那么在 iOS 中,会使固定列(.table__fixed-columns)的 pointer-events: none 失效。

最后一次编辑于  2019-09-03  
点赞 10
收藏
评论

6 个评论

  • 杰克凡
    杰克凡
    2020-10-10

    通过scroll-top来控制两边的联动,是怎么做到没有延迟的?我用相同的法子实现有延迟的啊/(ㄒoㄒ)/~~

    2020-10-10
    赞同 1
    回复
  • Hutool
    Hutool
    2019-10-14

    能指导一下怎么用吗

    2019-10-14
    赞同 1
    回复 2
    • Hutool
      Hutool
      2019-10-14
      它报了一个app.json入口未找到
      2019-10-14
      回复
    • 刘健超
      刘健超
      2019-10-14回复Hutool
      你使用框架还是原生?我提供的实现方式基于 WePY,对于其他框架或原生,需要进行相应的转化(即参考我的代码实现)。
      2019-10-14
      回复
  • 冧
    2020-03-12

    组件已使用,有个问题请教一下,打开页面,手机上表格样式出不来,数据出不来,打开调试没有报错,然后界面就好了。请问是什么原因

    2020-03-12
    赞同
    回复
  • wechat暂停使用
    wechat暂停使用
    2020-02-29

    不错,先收藏

    2020-02-29
    赞同
    回复
  • 宣华 
    宣华 
    2019-07-11

    能不能搞个基于原生的呀?不用 WePY 

    2019-07-11
    赞同
    回复 7
    • 刘健超
      刘健超
      2019-07-11
      可以根据 WePY 代码直接改造,应该还是比较快的。我目前比较少用原生代码,而且小程序框架又有多个,就只能让大家各自实现了。
      2019-07-11
      1
      回复
    • 卿成
      卿成
      2019-10-29
      基于原生的代码片段:https://developers.weixin.qq.com/s/WWSyUtmZ7kc9
      2019-10-29
      8
      回复
    • Dr.S' GM🏦
      Dr.S' GM🏦
      2020-03-05回复卿成
      谢谢
      2020-03-05
      回复
    • 角落的阳光
      角落的阳光
      2020-03-20回复卿成
      数据都封装好了,也能打印出来,但是有时候没有渲染到页面上是怎么回事呢?
      2020-03-20
      回复
    • 虚幻
      虚幻
      2020-04-20回复角落的阳光
      后来怎么处理了,我也是页面上渲染不出来,数据都没问题
      2020-04-20
      回复
    查看更多(2)
  • 宣华 
    宣华 
    2019-07-11

    不错,先收藏

    2019-07-11
    赞同
    回复
登录 后发表内容