固定行列表格

目录

• 1. 问题描述
• 2. 前置知识
• 3. 实现原理
• 4. scroll-view 同步
• 5. 注意点
• 6. 项目地址
• 7. 参考链接

1. 问题描述

在Excel表格中，有一个功能叫冻结行列；该功能的作用是固定表格中指定的行/列, 固定的行/列一般表述数据的说明; 这样就能使表格具有更好的可读性;
这是一个对于数据管理非常有用的功能，当在做一款关于客户管理的小程序时就涉及到了该功能, 下面是该功能在微信小程序的实现过程.

2. 前置知识

CSS 实现表格的关键属性:

/* 该属性用来决定表格的边框是分开的还是合并的，
   在分隔模式下，相邻的单元格都拥有独立的边框；
   在合并模式下，相邻单元格共享边框。 */
borborder-collapse: collapse
/* 这个值指定一个元素定义了一个块级表。因此它定义了一个生成块框的矩形块。相应的html元素是table */
display: table
/* 这个值指定一个元素是单元格的行，相应的html元素是tr元素 */
display: table-row
/* 这个值指定一个元素表示表中的单个单元格，html元素th和td都属于table-cell元素 */
displat: table-cell

3. 实现原理

其实, 固定表格并不是一个单一的表格, 而是通过z-index 属性达到盒模型叠加的原理来达到固定行列的效果; 下面是是固定表格的渲染流程:

1. 绘制固定行列交叉内容
   

2. 绘制固定列
   

3. 绘制固定行
   

4. 绘制非固定行列
   

4. scroll-view 同步

scroll-view 是微信小程序内置的scroll 内容组件, 他具有以下的特点

1. 只存在两个scroll-view 时, scroll-x, scroll-y 这两个内容在两个scroll-view 是同时出发的
2. 当存在三个scroll-view 时, 且它们特点如图所示时, scroll-x scroll-y 并非同时出发, 而是独立出发的;

5. 注意点

1. web 浏览器渲染固定行列表格的原理也是一致的;
2. 在这里实现的固定行列表格中，存在着一个问题：Y轴方向上的滑动其实左右存在着误差；导致这个误差的原因是：Y轴方向上左右两个scroll-view保持一致是通过组件的通信来实现的，所以这个时延是不可避免的; 当表格足够复杂, 那么会导致表格y轴滚动会异常卡顿, 因为scroll 事件触发的频率很高, this.setData 同样也非常消耗性能; 所以Y轴滑动最好不要在微信小程序中启用;
3. 对于第2点, 这里有一个优化建议: X轴的固定采用隐藏组件的方式(暂未验证)

6. 项目地址

固定行列表格

7. 参考链接

1. 微信小程序固定行列表格原理