小程序实现在线选座实战(中)

在实现选座组件前，我们这里先介绍一下，我们需要的座位表数据结果

其中x、y代表这个座位在整个座位表中的横轴和纵轴坐标，下面我们就针对这个数据结果展开实现这个选座组件

下面创建并且在init初始化模版:

这里还需要动态的计算 seatComponent 和 seat-container 的大小

在渲染座位前，我们先写一个 setData 方法来注入座位信息

通过 _getWrapperSize 方法算出最大x和y，然后根据容器的大小算出每一个座位占用的大小。绝对定位每一个座位，一个座位的left：“座位大小 座位的喊御腔x+偏移量”，top：“座位大小拆逗 座位的y”，这样遍历整个座位列表我们就可以得到整个座位图:

接下去实现，拖动座位图和放大缩小功能:

这里监听容器的 touchstart 、touchmove 、touchend 判断e.touches.length长度来判断指数，进行缩放或者移动的处理。

下面写监听点击了座位的事件，并抛出外部数据

以上基本已经完成了座位表的功能，不过有一个郑衫缺点，不能根据指定缩放位置缩放

假则虚拆设下图就是我们要实现的功能页面，我们先对这个功能页面进行组件划分，header、main、footer三个组件来分别实现：

这孙枣里我们定义了 header、main、footer 容器，分别来装载三个组件，所有的样式都放在styles.css中，reset.css是来重置样式，结合header里的那段脚本实现rem不同屏幕自适应。

这里没有互动，是很简单的展示组件

到这一步我们可以看到基本的架子了

这个组件我们就创建一个footer.js实现

以上我们用闭包创建了一个Footer组件，通过Footer.init实现组件初始化，对外留着一个setData方法，用来设置约定格式的数据然后进行视图渲染。还有一个resetStatus方法，来重置状态和视图。

然后我们在index.js对组件进行初始化

创建了Footer组件后，我们完成的界面如下:

接下去，我们誉前将在《小程序实现在线选座实战（中）》实现选座组件，在《小程序实现在线选座实战（下）》中实现数据交互。

---