微信小程序:表格的实现

一个在微信小程序中创建表格的demo

效果图

最后做出来大概就是这个样子的,先看下设计图:(画的真好看)

设计图

然后再看下数据返回的格式:

数据返回格式

这数据...o.0...

分析数据得知,后台返回的数据远比设计图上描绘的复杂,内容是不固定的,而且需要显示一周的排班

个人思路:用scroll-view来做,整个表格按 -行- 分为4大块:排班、上午、下午、晚上。

    ①先将从今天开始往后7天的日期放到数组中,作为第一大块的数据源

    ②循环遍历数据,找出所有排班在上午的时间,然后分别放到7个数组中(因为可能有多个数据,还是需要用数组存放)

    ③同理得出下午和晚上的数据


1、第一步:更改数据格式,将数据处理之后变为如下形式:

第一大块:weekArray:

        存放从今天开始 -> 7天后的数据在数组中

第二、三、四大块:sch_listData:

数据更改后


为什么要把数据变成这样呢?总感觉这样的方法有点傻,但又想不到别的办法,所以先这样吧,麻烦是麻烦了点,幸好最后的效果还不错。

wxml:

wxml

代码传图片太麻烦了,有需要的朋友去Git下载吧,

GitHub地址


小程序菜鸟,如果小小的踩坑经验能帮到你,记得给点小鼓励,谢谢支持~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容