在实现选座组件前,我们这里先介绍一下,我们需要的座位表数据结果
其中x、y代表这个座位在整个座位表中的横轴和纵轴坐标,下面我们就针对这个数据结果展开实现这个选座组件
下面创建并且在init初始化模版:
这里还需要动态的计算 seatComponent 和 seat-container 的大小
在渲染座位前,我们先写一个 setData 方法来注入座位信息
通过 _getWrapperSize 方法算出最大x和y,然后根据容器的大小算出每一个座位占用的大小。绝对定位每一个座位,一个座位的left:“座位大小 座位的喊御腔x+偏移量”,top:“座位大小拆逗 座位的y”,这样遍历整个座位列表我们就可以得到整个座位图:
接下去实现,拖动座位图和放大缩小功能:
这里监听容器的 touchstart 、touchmove 、touchend 判断e.touches.length长度来判断指数,进行缩放或者移动的处理。
下面写监听点击了座位的事件,并抛出外部数据
以上基本已经完成了座位表的功能,不过有一个郑衫缺点,不能根据指定缩放位置缩放
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)