一考即过座位预约小程序怎么用

一考即过座位预约小程序怎么用,第1张

一考即过座位预约小程序是一款帮助用户预约公务员考试座位的工具,有助或春于用户更加便捷地进行考试座位预约。其使用方法如下:首先碰举,用户衫吵耐需下载并安装该小程序,进入小程序后点击“新建预约”,根据系统提示依次选择考试科目、考试时间和考点,然后系统会自动为用户推荐可用座位。用户可进行选择并点击“预约座位”,进入支付页面完成支付,即可成功预约考试座位。如需修改、取消预约,也可进入“我的预约”进行相应 *** 作。 *** 作简单、明了,可供广大考生使用。

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

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

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

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

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

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

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

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/8188585.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存