最近工作中遇到一个在微信小程序里面做二维表格的需求，但是微信小程序适应的UI框架没有合适的例子，于是决定自己写一个。
最后实现效果如下：
效果图1
效果图2
其中实现了小计和总计，但是屏幕长度有限，截图只能分为2张。
数据返回的格式如下：
由于实际需求是要显示多条，所以数据格式定义了一个数组，但是由于篇幅有限，所以我只列出了一条数据，多条数据也是一样的情况，数组里面多加几条就可以了。
水平轴向的尺码可以直接通过遍历数据返回的格式里面的size数组生成，但是水平轴向的尺码需要和垂直轴向的颜色一一对应，于是需要对数据返回格式进行处理，得到按照size数组尺码顺序排列的新数组listData，其中subtotal代表小计，新数组如下：
比较关键的一点就是通过sort让数组sizeArr按照指定的size数组的顺序进行排序，这样才能和水平轴向的尺码相对应：
最终处理完的数组todayList如下:
其中total代表总计
具体代码就不详细介绍，需要的朋友去github进行下载
历史回顾： 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包，...
最近工作中遇到一个在微信小程序里面做二维表格的需求，但是微信小程序适应的UI框架没有合适的例子，于是决定自己写一个...
微信小程序在2017年就推出了扫描二维码跳转小程序的功能； 具体实现： 一、启用扫码跳转功能； 打开微信小程序...
场景 默认的微信小程序二维码访问路径如： 需要实现多个活动携带不同参数的二维码实际路径： 查了一下资料，微信小程序...
一个在微信小程序中创建表格的demo 最后做出来大概就是这个样子的，先看下设计图：（画的真好看） 然后再看下数据返...
12月1日小程序Demo集合 微信小程序Demo：金融理财计算器 微信小程序Demo：支付宝+微信二维码收款小程序...
1.小程序码介绍 从微信小程序开发文档上我们可以了解到，目前微信支持两种二维码（左），小程序码和小程序二维码（右）...
分享代码 分享注意事项 分享小程序二维码开发流程 二维码调用的接口，请阅读 ‘微信小程序之九：二维码’ 微信扫码...
引言 最近公司的微信小程序项目由于业务需求需要实现二维码推广海报，而小程序的服务端代码是用node.js实现的，由...
前言：通过企业微信小程序，实现zabbix自动注册和zabbix告警的微信消息推送。前言：通过企业微信小程序，实现...
本文标题：微信小程序：二维表格的实现
本文链接：https://www.haomeiwen.com/subject/upxffrtx.html
网友评论