前言

前段时间写了一个在线选座功能，现在分享一下。
纯Dom方式实现，包括miniMap，代码没怎么优化，主要提供实现思路。

一、功能介绍

支持选座区域划分
支持缩放选座区域大小（可配置）
支持拖拽选择区域
支持miniMap 拖拽
通过数据支持简单编辑座位布局

二、选座页面效果

分别是正常，缩小，放大后效果

三、实现原理

布局设计方面

1.一行一行渲染座位，通过行对象上的 colSplits 确定行布局，根据area 渲染区域颜色

rowArr: [{area: "VIP席"colSplits: [4,6,4]colTotal: 14cols: Array(16)
}]

2.根据 colSplits 处理处 cols 数据，就是一行中，每列数据

cols: [{area: "VIP席"checked: falsecol: 4disabled: falseid: 7price: 10roomId: 5row: 2seatId: 54solded: falsestatus: "FREE"
}]

3.根据 status 判断座位状态，根据checked 判断座位选中状态以及样式，
row与col分别是几行几列

4.间距为特殊的行数据与列数据(这里不同区域有间距)，通过isSide 判断边界

rowArr: [{area: "VIP席"isSide: truenumber: {value: 110}
}]cols: [{isSide: true
}]

交互实现方面

1.左上角小地图同样和选座区域一样实现，通过 transition: scale() 缩放至合适大小。
2.选座区域拖拽通过固定容器大小，撑开内部内容大小，使固定容器出现滚动条(通过样式隐藏滚动条)。
3.拖拽（移动端就是触发滚动事件）获取滚动上下距离，同比与小地图大小比，计算红框范围（可选范围）。
4.拖拽小地图红框（可选范围），计算范围后直接设置固定容器的 滚动值 即可，滚动会触发上面第三条。
5.缩放通过模拟两指距离远近，获取值后通过设置样式 zoom: ? 改变大小。

下面有在线例子，可以对查看

四、在线例子

在线Demo 查看，可编辑示例（缩放效果在移动端查看，两指缩放）

总结

选座功能样式与逻辑交互关联偏多，样式有差异可能造成呈现效果有偏差。
还有以上例子原本博主是做小程序嵌入H5 的，在模拟事件时，设置了原有对象属性，
在IOS 的微信小程序或报错提示内部对象不可设置属性。

本来不想自己写选座的，但是网上搜索H5 版选座都不支持miniMap，以至于自己动手写了。

以上信息如有疏漏或错误，欢迎指正，谢谢。

Vue 实现移动端在线选座功能（支持miniMap，支持缩放）相关推荐

视频教程-react电影院在线选座功能-ReactJS
react电影院在线选座功能北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥29.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
andriod 打造炫酷的电影票在线选座控件，1比1还原淘宝电影在线选座功能
本篇文章已经授权微信公共账号 guolin_blog(郭霖)独家发布不知道大家有没有跟我一样的感觉,看了那么多的介绍自定义控件原理.事件分发机制的书籍,文章,教程,依然还是不能随心所欲的自定义控件. ...
java电影票选座_Android自定义view实现电影票在线选座功能
先看看电影票在线选座功能实现的效果图: 界面比较粗糙,主要看原理. 这个界面主要包括以下几部分 1.座位 2.左边的排数 3.左上方的缩略图 4.缩略图中的红色区域 5.手指移动时跟随移动 6.两个手 ...
vue影院在线选座--可拖拽、缩放--A/B/C三级座位
以前练习写项目的时候,写过一个影院的在线选座页面,也看了很多插件和别人写的,大部分是移动端,类似于美团电影那种选座,页面可以放大,缩小,拖拽,我写的是PC端的,看看效果: 再放一张原图,看得清楚: 说 ...
java在线选座功能_基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座 ...
选座php,ticketbooking 电影院在线售票系统,可以选座功能和订票，分为前台管理和后 WEB(ASP,PHP,...) 246万源代码下载- www.pudn.com...
文件名称: ticketbooking下载收藏√ [ 5 4 3 2 1 ] 开发工具: ASP 文件大小: 783 KB 上传时间: 2015-04-17 下载次数: 4 提供者: ...
在线选座位 html5,在线选座须知
目前在线选座功能适用于厦航所有航线,其中付费座位仅适用于国际(地区)航线.在线选座需遵循以下原则: 1. 旅客请于航班起飞72小时之前进行在线选座. 2. 厦航部分航线因航班性质等原因限制在线选座功能 ...
自定义View实战：影院在线选座
不知道周末有没有小伙伴使用在线选座app看电影?今天来自起风的清晨的投稿,将高度还原淘票票APP,大家可以自己评判一下还原度噢~~ 起风的清晨的博客地址: http://blog.csdn.ne ...
Axure电影购票服务产品需求文档+Axure体育球赛购票服务产品需求文档+Axure演唱会购票服务原型+在线购票系统+在线买票+在线选座+移动端票务系统+Axure电影购票服务prd文档
Axure原型作品介绍:Axure电影购票服务产品需求文档+Axure体育球赛购票服务产品需求文档+Axure演唱会购票服务原型+在线购票系统+在线买票+在线选座+移动端票务系统+Axure电影购票服 ...

Vue 实现移动端在线选座功能（支持miniMap，支持缩放）

Vue 实现在线选座功能（支持miniMap，支持缩放）

前言