微信小程序：二维表格的实现
2021-12-09 本文已影响0人
奔跑的大橙子
最近工作中遇到一个在微信小程序里面做二维表格的需求，但是微信小程序适应的UI框架没有合适的例子，于是决定自己写一个。
最后实现效果如下：
效果图1
效果图2
其中实现了小计和总计，但是屏幕长度有限，截图只能分为2张。
数据返回的格式如下：
由于实际需求是要显示多条，所以数据格式定义了一个数组，但是由于篇幅有限，所以我只列出了一条数据，多条数据也是一样的情况，数组里面多加几条就可以了。
水平轴向的尺码可以直接通过遍历数据返回的格式里面的size数组生成，但是水平轴向的尺码需要和垂直轴向的颜色一一对应，于是需要对数据返回格式进行处理，得到按照size数组尺码顺序排列的新数组listData，其中subtotal代表小计，新数组如下：
比较关键的一点就是通过sort让数组sizeArr按照指定的size数组的顺序进行排序，这样才能和水平轴向的尺码相对应：
最终处理完的数组todayList如下:
其中total代表总计
具体代码就不详细介绍，需要的朋友去github进行下载
