JChehe/mini-program-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update readme.md

Browse Source
This commit is contained in:
J.c
2019-07-04 23:16:20 +08:00
committed by GitHub
parent 3b09f43c79
commit 1c80df8160
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
readme.md
View File

@@ -4,11 +4,13 @@
#### 演示 #### 演示
![视频演示][1] ![Gif 演示][1]
[演示视频地址>>][2]
#### 实现原理 #### 实现原理
![分层展示][2] ![分层展示][3]
1. 橙色和紫色区域组成了**横向滚动**的 `scroll-view`。 1. 橙色和紫色区域组成了**横向滚动**的 `scroll-view`。
2. 红色虚线区域是**纵向滚动**的 `scroll-view`。但由于绿色区域设置了 `pointer-events: none;`，即实际只能触摸橙色区域。通过在橙色区域绑定的 `scroll` 事件，实时设置绿色虚线区域的 `scrollTop`。 2. 红色虚线区域是**纵向滚动**的 `scroll-view`。但由于绿色区域设置了 `pointer-events: none;`，即实际只能触摸橙色区域。通过在橙色区域绑定的 `scroll` 事件，实时设置绿色虚线区域的 `scrollTop`。
@@ -16,12 +18,13 @@
#### 实现要点 #### 实现要点
1. 绑定了 `scroll` 事件的 `scroll-view` 要指定 `throttle: false`，否则回调函数有可能取不到 `scrollTop` 最终位置的值。官方文档目前未提及此属性，[参考资料>>][3]。 1. 绑定了 `scroll` 事件的 `scroll-view` 要指定 `throttle: false`，否则回调函数有可能取不到 `scrollTop` 最终位置的值。官方文档目前未提及此属性，[参考资料>>][4]。
2. 固定列需要设置 `pointer-events: none;`，实现点击穿透。使得 `tbody` 能触发 `scroll` 事件，而不是为固定列也绑定 `scroll` 事件。 2. 固定列需要设置 `pointer-events: none;`，实现点击穿透。使得 `tbody` 能触发 `scroll` 事件，而不是为固定列也绑定 `scroll` 事件。
3. 找出每列的最大单元格作为该列的宽度，你也可以显示设置。 3. 找出每列的最大单元格作为该列的宽度，你也可以显示设置。
peace out!👋 peace out!👋
[1]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/Video_2019-07-04_141139-min.gif [1]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/Video_2019-07-04_141139-min.gif
[2]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/analyse.png [2]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/table.mp4
[3]: https://developers.weixin.qq.com/community/develop/doc/0008eeba9e0f9062b27780d9856c00?_at=1560441776584 [3]: https://mini-program-table-1251477229.cos.ap-chengdu.myqcloud.com/analyse.png
[4]: https://developers.weixin.qq.com/community/develop/doc/0008eeba9e0f9062b27780d9856c00?_at=1560441776584