{"id":19667441,"url":"https://github.com/jchehe/mini-program-table","last_synced_at":"2025-04-28T23:32:29.472Z","repository":{"id":47996423,"uuid":"195188911","full_name":"JChehe/mini-program-table","owner":"JChehe","description":"基于 WePY 实现的固定头和列的 table 组件，可根据自身需求进行修改扩展。","archived":false,"fork":false,"pushed_at":"2022-12-09T17:00:43.000Z","size":220,"stargazers_count":14,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-22T16:54:53.197Z","etag":null,"topics":["fixed-columns-header","fixed-table","mini-program","miniprogram","table"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JChehe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-04T07:14:35.000Z","updated_at":"2021-01-05T08:41:37.000Z","dependencies_parsed_at":"2023-01-25T15:46:52.361Z","dependency_job_id":null,"html_url":"https://github.com/JChehe/mini-program-table","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2Fmini-program-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2Fmini-program-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2Fmini-program-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2Fmini-program-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JChehe","download_url":"https://codeload.github.com/JChehe/mini-program-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224137668,"owners_count":17262062,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fixed-columns-header","fixed-table","mini-program","miniprogram","table"],"created_at":"2024-11-11T16:32:11.358Z","updated_at":"2024-11-11T16:32:11.630Z","avatar_url":"https://github.com/JChehe.png","language":"JavaScript","readme":"### 固定头和列的表格实现 —— 小程序\n\n基于 WePY 实现，大家可根据自身需要进行更改扩展。\n\n#### 演示\n\n![Gif 演示][1]\n\n[演示视频地址\u003e\u003e][2]\n\n#### 实现原理\n\n![分层展示][3]\n\n 1. 橙色和紫色区域组成了**横向滚动**的 `scroll-view`。\n 2. 红色虚线区域是**纵向滚动**的 `scroll-view`。但由于绿色区域设置了 `pointer-events: none;`，即实际只能触摸橙色区域。通过在橙色区域绑定的 `scroll` 事件（纵向），实时设置绿色虚线区域的 `scrollTop`。\n 3. 紫色区域是固定头部，绿色区域是固定列。左上角的绿色区域是横向与纵向共同固定的区域。\n\n#### 实现要点\n\n 1. 绑定了 `scroll` 事件的 `scroll-view` 要指定 `throttle: false`，否则回调函数有可能取不到最终位置的 `scrollTop` 值。官方文档目前未提及此属性，[参考资料\u003e\u003e][4]。\n 2. 固定列需要设置 `pointer-events: none;`，实现点击穿透。使得 `tbody` 能触发 `scroll` 事件，而不是为固定列也绑定 `scroll` 事件。\n 3. 找出每列的最大单元格作为该列的宽度，当然你也可以显式设置。\n\npeace out!👋\n\n#### 小程序 Bug\n\n2019.09.03 更新  \n当将该组件至于 Popup 弹框，且该弹框通过 `visibility: hidden/visible` 切换，那么在 **iOS** 中，会使固定列（`.table__fixed-columns`）的 `pointer-events: none` 失效。\n\n [1]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/Video_2019-07-04_141139-min.gif\n [2]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/table.mp4\n [3]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/analyse.png\n [4]: https://developers.weixin.qq.com/community/develop/doc/0008eeba9e0f9062b27780d9856c00?_at=1560441776584\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchehe%2Fmini-program-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjchehe%2Fmini-program-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchehe%2Fmini-program-table/lists"}