目录 2. 组件页面布局 3. 组件业务逻辑总结 1. 简介

想必很多人都有过和男朋友或女朋友一起去看电影的经历。每次选座位的时候都要征求女朋友或男朋友的意见吗？什么？不请自来？ ！然后你就完成了！

目前市面上众多的电影购票APP和小程序中，为了让观众更好地在线选择自己喜欢的座位，便捷、可视化的选座数据必不可少。下面，就让我们一起来看看吧。看看这个有用的视觉座位选择组件！

视图效果如下：

如果各位读者感兴趣，请继续阅读！

1. 组件数据

首先，我们需要向组件传入两个数据，以便在显示组件时使用。一是电影院的厅号，二是座位排列，如下：

门厅号：大写数字字符串

座位数据：数组点阵，左右空白用0表示，普通座位用1表示，首选座位用2表示，已被其他观众选择过的座位用3表示。数据如下：

传递的数据需要在组件的js文件中声明。与页面声明方式不同，组件中声明的数据需要写出数据类型。

properties: { seatings: Array, hallNumber: String },

2. 组件页面布局

页面上有一些可以移动的，一些不能移动的，当然还有一些可以自己移动的。对于该组件，顶部的徽标区域是静态部分，座位区域是可移动的，可以用两根手指放大和缩小。具体结构如下：

1、Logo区域构成

该区域主要起到提示座位信息的提醒作用，包括普通区域和偏好区域。当然，代码可以直接窃取座位区座位的WXSS样式，并用类名来实现。当然，c位谁不喜欢呢~

普通区 优选区

2. 座位区构成

我们把这个部分分为三个小部分：屏幕、影院介绍和座位区。听我详细解释吧！

2.1 电影画面：

为了实现屏幕圆弧效果，我们可以使用遮罩的方法，非常好用！首先通过一个矩形框构造屏幕长和宽，然后利用椭圆饼的边缘将其显示在矩形框内。其他部分使用：属性然后调整背景色和边框颜色，达到屏幕效果

html如下：

wxss如下：

.visual_screen { height: 30rpx; width: 100%; display: flex; justify-content: center; overflow: hidden; margin-bottom: 10rpx; } .screen { margin-top: 0; padding: 0; height: 30vw; width: 100vw; box-sizing: border-box; border: 15rpx solid #c9cdd3; border-radius: 50%; }

2.2 影院厅介绍：

这部分比较简单。只需插入传输的数据并微调样式即可。

wxml:

wxml: {{hallNumber}}号厅-（请佩戴口罩、1.3米以上儿童购票） wxss： .visual_title { font-size: 23rpx; width: 100%; height: 20rpx; text-align: center; color: #6d6d6d; margin-bottom: 30rpx; }

2.3 座位区：

基本结构：

基本单位：由于座椅的宽度设置为基本单位vw，方便单位和车型的统一，所以这里我也将vw中的高度设计为单位。

座位样式：从之前传输的座位数组中我们知道，我们有五种座位样式，分别是：（常规座位）、（首选座位）、（空白座位）、（不可选择座位）和（当前选择座位），这里的座椅基本款式都是一样的，可以统一，然后每个独特的款式可以单独写。对于空白座位，只需将边框颜色设置为透明即可达到效果。

.seatNormal, .seatExcellent, .seatNone, .seatChosen { height: 4vw; width: 4vw; margin: 1vw; border-radius: 8rpx; box-sizing: border-box; } .seatNormal { border: 1rpx solid #63c0c0; } .seatChosen { border: 1rpx solid red; background-color: red; } .selected { border: 1rpx solid #05ca90; background-color: #05ca90; } .seatExcellent { border: 1rpx solid #f18e14; } .seatNone { border: 1rpx solid rgba(0, 0, 0, 0); }

推荐有用的样式：在wxss中我们使用一个非常有用的样式“box-:-box;”。该样式设置的宽度和高度决定了元素的边框。也就是说，为元素指定的任何填充和边框都将在设置的宽度和高度内绘制。内容的宽度和高度是通过分别从设置的宽度和高度中减去边框和填充来获得的。高度以方便控制元素大小。

整体布局：座位区采用灵活布局：flex，并使用flex-wrap:wrap在座位坐满后自动包裹。一个大盒子包裹一个盒子，让里面的盒子可以灵活居中，达到整体居中的效果。

.visual_seatings { display: flex; align-items: center; justify-content: center; width: 100%; height: 43vw; } .visual_seating { width: 90%; height: 43vw; display: flex; flex-wrap: wrap; }

可移动缩放区域：为了方便选择座位，我们将座位区域设置为两指可移动缩放，所以需要用到微信小程序的一个API：-area和-view。

-area：必须设置该区域及属性。如果未设置，则默认为 10px。同时，当-view小于-area时，-view的移动范围在-area内。当-view大于-area时，-view的移动范围必须包含-area（x轴方向和y轴方向分开考虑）。

-view：属性设置各个方向的移动方向=“all”；支持两指缩放="{{true}}"；最大和最小缩放倍数-min=“0.3”和-max=“1.5”；如果要绑定还可以添加绑定方法来定义触发条件，拖动绑定事件：，缩放绑定事件等。

Tips：当视图区域放大时，x、y坐标保持不变，会导致视图区域超出区域面积。为了让视图可移动区域不遮挡上方的元素，可以降低放大倍率的上限，并在上方添加一些空白区域，以增加页面的美观度。

详细使用方法请参考微信小程序官网手册：

/…

3.组件业务逻辑

座位数据输出：上次提到，座位数据存储在数组中，不同的座位用不同的数字表示，所以我们在输出数据时需要进行判断。这里通过标签循环输出数组数据，然后对数组数据进行判断，以不同的格式输出。

选择座位：当用户点击某个座位时，座位样式发生变化，并记录座位数据。首先需要传输循环期间的下标数据 wx:for="{{}}" wx:key="" data-=""，在各个席位的视图中绑定事件，并接收js文件方法；

我们需要用到两个数据：选中席位总数（限制为6个）和下标数组（存放被点击的席位），所以我们在数据中声明：[ ], : 0，在方法中声明方法；

方法逻辑：先保存下标，并判断该元素是否存在于下标数组中（使用数组的()方法）。如果存在，则说明之前已经被选择过。现在再次单击“取消”。如果需要删除，则更改下标数组中的下标即可。删除，所选席位总数减少1个；否则，如果不存在，则判断总选席数是否小于6，如果小于则将数据插入数组，总选席数加1 。如果不少于6个，则提示已选座位总数，最多选6张票；

这时候我们就有了下表的数据，我们可以进行更复杂的业务操作了！ ！

Tip：由于数组没有删除元素的方法，所以声明一个()方法，先获取元素下标，然后删除。

selected(e) { let index = e.currentTarget.dataset.index; if(this.data.selectedIndex.indexOf(index) != -1){ let selectedIndex = this.remove(this.data.selectedIndex, index); let selectedNum = this.data.selectedNum - 1; this.setData({ selectedIndex, selectedNum }) }else{ if(this.data.selectedNum < 6){ let selectedNum = this.data.selectedNum + 1; let selectedIndex = this.data.selectedIndex.concat(index); this.setData({ selectedIndex, selectedNum }) }else{ wx.showToast({ title: '最多选择六张票', }) } } }, remove(arr, ele) { var index = arr.indexOf(ele); if (index > -1) { arr.splice(index, 1); } return arr; }

选定风格变化：在座位视图中，我们使用三元运算符进行数据判断：如果前面的结果为true，即数组中存在该数据的下标，则添加类名和座位风格变化；否则，添加一个空的类名。

Tips：由于数组方法在wxml中无效，所以我们需要在同目录的util文件夹中声明一个函数供三元运算调用，自己就能丰衣足食了！使用时只需要通过wxs src="../../util/.wxs" =""来声明，就可以使用.方法。效果和数组自带的方法是一样的~

// indexOf方法 function indexOf(arr, value) { if (arr.indexOf(value) < 0) { return false; } else { return true; } } module.exports.indexOf = indexOf;

如果您需要具体的组件源码，请从！

//所以…

总结

本篇关于微信小程序组件开发的视觉电影选座功能的文章到此结束。更多相关小程序视觉电影选座内容，请搜索我们之前的文章或继续浏览下方相关文章。我希望你将来也能这样做。请支持我们！