项目实训---微信小程序之选座界面逻辑

1. 状态栏数组,以对象为元素的一维数组

项目实训---微信小程序之选座界面逻辑_第1张图片

 2.座位状态表,以座位作为对象的二维数组,以此形式存储空间信息

此处以十六进制颜色作为状态标识,主要是考虑到后续如果添加某个新的状态,能够不修改小程序代码,只需要后台传数据时,传入新的颜色即可。

项目实训---微信小程序之选座界面逻辑_第2张图片

 3.活动信息 同样考虑到后续的信息添加或修改,采用列表渲染

项目实训---微信小程序之选座界面逻辑_第3张图片

4.此处是一个方法,在用户点击某个座位时,取消其他座位的选取状态项目实训---微信小程序之选座界面逻辑_第4张图片

 5. 此处是用户点击某个座位时触发的函数,用来切换座位颜色,在第一次逻辑写完后,发现了另一种简洁的实现方法,如果时间允许,将在后续迭代中修改。

项目实训---微信小程序之选座界面逻辑_第5张图片

6.页面加载时,根据后台传来的教室大小(座位行列数)进行页面的适配,此功能需要与后台对接后进行一个阈值的确定,因为如果座位数过少,则座位相应的应当变大,(主要是宽度变大),但是高度不能简单的线性的变大(列数少,行数多的教室显示出来会很影响使用),还有是列数和行数比较多的教室,则需要设定座位的最小高宽,座位拥挤则用页面缩放来解决(主要是放大)

项目实训---微信小程序之选座界面逻辑_第6张图片

 

 

 

 

你可能感兴趣的:(项目实训)