影院座位选择简易实现（uniapp）

界面展示

主要使用到uniap中的movable-area，和movable-view组件实现。

代码逻辑分析

1、使用movable-area和movea-view组件，用于座位展示

<div class="ui-seat__box"><movable-area  class="ui-movableArea"><movable-view></movable-view></movable-area>
</div>
.ui-movableArea {width: 600rpx;height: 500rpx;border: 1rpx solid #999;overflow: hidden;}

先给movable-area组件定义宽高，用于展示区域

2、 给moveable-view设置可移动，宽高等

<movable-area class="ui-movableArea"><movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView":style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"scale-max="1.5"damping="200"@scale="handleSize"></movable-view></movable-area>

其中direction,out-of-bounds,scale,scale-max,damping,@scale等配置项在uniapp文档中查看介绍，分别表示为（是否全方向移动，超出能否移动，能否放大，最大的放大倍数，回弹时间，移动的回调）

3、影院的座位数据

通过以下方法，随机生成id唯一的座位，用于座位展示

function generateSeatArray(count) {const seats = [];for (let i = 0; i < count; i++) {seats.push({id: i + 1, // 随机生成 1 到 100 之间的唯一IDseat_x: (i % 11) + 1, // 规律递增 seat_x，范围 1 到 11seat_y: Math.floor(i / 11) + 1, // 规律递增 seat_y，范围 1 到 11canBuy: Math.random() > 0.5, // 随机生成 true 或 falseprice: Math.floor(Math.random() * 81) + 20 // 随机生成 20 到 100 之间的整数});}return seats;
}
export default generateSeatArray;

此方法结果为对象数组，表示以左上角为原点，右边为x轴正方向，下面为y轴正方向的坐标（seat_x,seat_y），canBuy表示能否购买此座位，price表示座位价格

[{seat_x: 1,seat_y: 1,canBuy: true,price: 20},{seat_x: 2,seat_y: 1,canBuy: true,price: 20},........
]

4、moveable-view的宽高设置

回到标题2的代码片段

<movable-area class="ui-movableArea"><movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView":style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"scale-max="1.5"damping="200"@scale="handleSize"></movable-view></movable-area>

在mova-view中有 :style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}"

whData的数据如下所示，拿到座位数据作为参数传给handleMax方法，得到最大的宽和高

handleMax(array) {const maxData = array.reduce((preObj, cur) => {preObj.width = Math.max(preObj.width, cur.seat_x);preObj.height = Math.max(preObj.height, cur.seat_y)return preObj;}, {width: 0,height: 0})return maxData;},

 datalist是标题3中生成的座位数据

this.whData = this.handleMax(dataList);
whData = {widht:10,height:10
}

5、座位展示

<movable-area class="ui-movableArea"><movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView":style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"scale-max="1.5"damping="200"@scale="handleSize"><view class="ui-seat"><!-- 座位 --><view class="ui-item" v-for="item in seatList" :key="item.id":style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"@click="handleSelect(item)"><view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view><view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view></view></view></movable-view></movable-area>

在moveabel-view中新增view组件，用于展示每一个座位 ，注意看类（ui-seat）设置成相对定位

	.ui-seat {display: flex;flex-wrap: wrap;position: relative;}

类（ui-item）设置成绝对定位

.ui-item {margin: 5px;border: #999 1px solid;/* padding: 20rpx; */position: absolute;}

 因为在现实情况下会出现某个地方没有座位的情况，需要使用绝对定位的方式，根据每个座位的x,y的坐标进行展示

:style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"

这行表示根据每个item项的坐标进行对应展示，并且不会重叠

<view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view>

 <view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view></view>

关于能否选择座位使用v-if来进行判断

6、左边列表展示 

			<movable-area class="ui-movableArea"><movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView":style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"scale-max="1.5"damping="200"@scale="handleSize"><view class="ui-seat"><!-- 座位 --><view class="ui-item" v-for="item in seatList" :key="item.id":style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"@click="handleSelect(item)"><view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view><view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view></view><!-- 列表 --><view class="ui-list" :style="{left: moveX + 'px'}"><view class="ui-list__item" v-for="i in whData.height" :key="index">{{i + 1}}</view></view></view></movable-view>

在座位代码下面新增列表展示，在moveable-view中有@change方法，用于获取上下左右移动了多少,并存到moveX,和moveY中，根据左移的距离判断列表位置

handleMove(e) {const {x,y,source} = e.detail;setTimeout(() => {this.moveX = Math.abs(x);this.moveY = y;}, 200)},

完整代码

<template><view class="content"><view class="ui-top">电影信息</view><view class="ui-body">以下是座位控制</view><div class="ui-seat__box"><movable-area class="ui-movableArea"><movable-view direction="all" :out-of-bounds="false" :scale="true" class="ui-movableView":style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"scale-max="1.5"damping="200"@scale="handleSize"><view class="ui-seat"><!-- 座位 --><view class="ui-item" v-for="item in seatList" :key="item.id":style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"@click="handleSelect(item)"><view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view><view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view></view><!-- 列表 --><view class="ui-list" :style="{left: moveX + 'px'}"><view class="ui-list__item" v-for="i in whData.height" :key="index">{{i + 1}}</view></view></view></movable-view></movable-area></div></view>
</template><script>import seatfun from './seat-data.js';export default {data() {return {title: 'Hello',seatList: [],whData: {},moveX: 0,moveY: 0}},onLoad() {const dataList = seatfun(50);// dataList.splice(2,4);// dataList.splice(10,12);this.seatList = dataList;// 获取宽度this.whData = this.handleMax(dataList);},methods: {handleMax(array) {const maxData = array.reduce((preObj, cur) => {preObj.width = Math.max(preObj.width, cur.seat_x);preObj.height = Math.max(preObj.height, cur.seat_y)return preObj;}, {width: 0,height: 0})return maxData;},handleSelect(item) {// console.log(item.seat_x,item.seat_y);if (item.canBuy) {item.canBuy = !item.canBuy;} else {// console.log(item);uni.showToast({title: '此座位不可选'})}},handleMove(e) {const {x,y,source} = e.detail;setTimeout(() => {this.moveX = Math.abs(x);this.moveY = y;}, 200)},handleSize(e){const {x,y,scale} = e.detail;setTimeout(() => {this.moveX = Math.abs(x);this.moveY = y;}, 200)}}}
</script><style scoped>view {box-sizing: border-box;}.ui-top {height: 200rpx;background-color: greenyellow;}.ui-movableArea {width: 600rpx;height: 500rpx;border: 1rpx solid #999;overflow: hidden;}.ui-seat__box {display: flex;justify-content: center;}.ui-seat {display: flex;flex-wrap: wrap;position: relative;}.ui-movableView {width: 700rpx;height: 700rpx;overflow: hidden;background-color: antiquewhite;}.ui-item__class__can {width: 60rpx;height: 40rpx;background-color: darkred;}.ui-item__class {width: 60rpx;height: 40rpx;background-color: palegreen;}.ui-item {margin: 5px;border: #999 1px solid;/* padding: 20rpx; */position: absolute;}.active {background-color: greenyellow;}.ui-list {position: absolute;top: 30px;width: 50rpx;background-color: #fff;}.ui-list__item {margin: 10rpx;padding: 5rpx;}
</style>

seat-data.js代码

function generateSeatArray(count) {const seats = [];for (let i = 0; i < count; i++) {seats.push({id: i + 1, // 随机生成 1 到 100 之间的唯一IDseat_x: (i % 11) + 1, // 规律递增 seat_x，范围 1 到 11seat_y: Math.floor(i / 11) + 1, // 规律递增 seat_y，范围 1 到 11canBuy: Math.random() > 0.5, // 随机生成 true 或 falseprice: Math.floor(Math.random() * 81) + 20 // 随机生成 20 到 100 之间的整数});}return seats;
}
export default generateSeatArray;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/796352.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【毕业论文】酒店价格采集与可视化查询设计与实现开题报告2000字

【毕业论文】酒店价格采集与可视化查询设计与实现开题报告2000字

酒店价格采集与可视化查询设计与实现开题报告 研究背景 随着互联网技术的飞速发展&#xff0c;人们获取信息的途径越来越多样化。特别是在旅游行业中&#xff0c;消费者对于酒店价格的透明度和实时性要求越来越高。美团、大众点评、抖音等平台作为信息聚合和分享的重要渠道&a…
阅读更多...
力扣---***********LRU 缓存***********

力扣---***********LRU 缓存***********

请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则返回 -…
阅读更多...
Flutter开发进阶之错误信息

Flutter开发进阶之错误信息

Flutter开发进阶之错误信息 在Flutter开发中错误信息通常是由Exception和Error表示&#xff0c;Error表示严重且不可恢复的错误&#xff0c;一般会导致程序直接终止&#xff0c;而Exception可以被显式抛出&#xff0c;一般为代码逻辑错误&#xff0c;根据Flutter的解释说Excep…
阅读更多...
Vue3：对ref、reactive的一个性能优化API

Vue3：对ref、reactive的一个性能优化API

一、情景说明 我们知道&#xff0c;在Vue3中&#xff0c;想要创建响应式的变量&#xff0c;就要用到ref、reactive来包裹一下数据即可。 但是&#xff0c;这里有个损耗性能的地方 就是&#xff0c;被它包裹的数据&#xff0c;都会构建成响应式的&#xff0c;无论多少层次&…
阅读更多...
【opencv】示例-aruco_dict_utils.cpp 计算 ArUco 字典度量

【opencv】示例-aruco_dict_utils.cpp 计算 ArUco 字典度量

该程序可用于计算 ArUco 字典度量。 要计算考虑翻转标记的指标&#xff0c;请使用 -r 标志。 该程序可用于创建和编写自定义 ArUco 词典。 #include <opencv2/objdetect/aruco_detector.hpp> // 包含aruco marker检测相关功能的头文件 #include <iostream> // 包含…
阅读更多...
数码视讯Q7盒子刷armbian遇到的坑之二

数码视讯Q7盒子刷armbian遇到的坑之二

继续&#xff0c;nand的q7 搜遍全网&#xff0c;这个盒子能用的安卓映像有两个&#xff0c;一个本站付费下载的那个&#xff0c;另一个是20191218-Q7-nand-4.4.2-root-twrp-Milton这个映像&#xff08;具体地址自己搜索吧&#xff09;。第一个需要license&#xff0c;需要自己…
阅读更多...
如何在 Ubuntu 上安装和配置 Tomcat 服务器？

如何在 Ubuntu 上安装和配置 Tomcat 服务器？

简介&#xff1a;最近有粉丝朋友在问如何在 Ubuntu 上安装和配置 Tomcat 服务器&#xff1f;今天特地写这篇文章进行解答&#xff0c;希望能够帮助到大家。 文章目录 Ubuntu上安装和配置Tomcat的详细步骤Tomcat在Linux环境下的安装与配置一、下载并上传Tomcat压缩包二、启动To…
阅读更多...
云架构（三） 防腐层模式

云架构（三） 防腐层模式

Anti-corruption Layer pattern (https://learn.microsoft.com/en-us/azure/architecture/patterns/anti-corruption-layer) 简单描述 实现一个门面或者适配层在新应用和历史遗留程序之间。在不同的系统之间实现一个门面或者适配层&#xff0c;不需要使用相同的语义。它在不…
阅读更多...
961: 进制转换问

961: 进制转换问

【学习版】 【C语言】 #include<iostream>struct SeqList {int top;int len;int* s; };void initStack(SeqList* stack, int len) {stack->s new int[len];stack->top -1;stack->len len; }void push(SeqList* stack, int x) {stack->s[stack->top] …
阅读更多...
YOLOv5实战记录05 Pyside6可视化界面

YOLOv5实战记录05 Pyside6可视化界面

个人打卡&#xff0c;慎看。 指路大佬&#xff1a;【手把手带你实战YOLOv5-入门篇】YOLOv5 Pyside6可视化界面_哔哩哔哩_bilibili 零、虚拟环境迁移路径后pip报错解决 yolov5-master文件夹我换位置后&#xff0c;无法pip install了。解决如下&#xff1a; activate.bat中修改…
阅读更多...
.NET8 和 Vue.js 的前后端分离

.NET8 和 Vue.js 的前后端分离

在.NET 8中实现前后端分离主要涉及到两个部分&#xff1a;后端API的开发和前端应用的开发。后端API通常使用ASP.NET Core来构建&#xff0c;而前端应用则可以使用任何前端框架或技术栈&#xff0c;比如Vue.js、React或Angular等。下面是一个简化的步骤指南&#xff0c;帮助你在…
阅读更多...
汇川PLC学习Day4：电机参数和气缸控制参数

汇川PLC学习Day4：电机参数和气缸控制参数

汇川PLC学习Day4&#xff1a;伺服电机参数和气缸控制参数 一、伺服电机参数二、气缸参数1. 输入IO映射&#xff08;1&#xff09;输入IO映射&#xff08;2&#xff09; 输入IO触摸屏标签显示映射 2. 输出IO映射&#xff08;1&#xff09;输出IO映射&#xff08;2&#xff09; …
阅读更多...
【工具或平台】Gem5编译

【工具或平台】Gem5编译

Gem5编译 安装依赖 源更新 sudo apt-get update sudo apt-get upgrade 安装依赖 sudo apt install vim sudo apt install build-essential git m4 scons zlib1g zlib1g-dev libprotobuf-dev protobuf-compiler libprotoc-dev libgoogle-perftools-dev python3-dev python-is-…
阅读更多...
基于单片机电动车电压电流监测系统

基于单片机电动车电压电流监测系统

**单片机设计介绍&#xff0c;基于单片机电动车电压电流监测系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的电动车电压电流监测系统是一个集成了电子技术、单片机编程以及电压电流测量技术的系统。其主要目的是…
阅读更多...
Open3D (C++) 从.txt文件中读取数据到矩阵

Open3D (C++) 从.txt文件中读取数据到矩阵

目录 一、算法概述二、代码实现三、结果展示四、测试数据本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法概述 在进行实验的时候有时需要借助不同的工具来实现一些比较复杂的操作，比如使用matlab中自带的拉…
阅读更多...
lua学习笔记4（运算符的学习）

lua学习笔记4（运算符的学习）

print("*****************************lua运算符的学习*******************************") print("*****************************基本运算符*******************************") a1145 b8848 print("加法运算"..ab) print("减法运算".…
阅读更多...
Spark-Scala语言实战（14）

Spark-Scala语言实战（14）

在之前的文章中&#xff0c;我们学习了如何在spark中使用键值对中的fullOuterJoin&#xff0c;zip&#xff0c;combineByKey三种方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点…
阅读更多...
考研高数（平面图形的面积，旋转体的体积）

考研高数（平面图形的面积，旋转体的体积）

1.平面图形的面积 纠正&#xff1a;参数方程求面积 2.旋转体的体积&#xff08;做题时&#xff0c;若以x为自变量不好计算&#xff0c;可以求反函数&#xff0c;y为自变量进行计算&#xff09;
阅读更多...
【STL学习】（3）vector容器

【STL学习】（3）vector容器

前言 本章主要内容为两个部分&#xff1a; vector是什么&#xff1f;vector常用接口的使用。 一、vector的介绍 vector是表示可变大小数组的容器就像数组一样&#xff0c;vector也采用的连续空间来存储元素。也意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样…
阅读更多...
【二分查找】Leetcode 在排序数组中查找元素的第一个和最后一个位置

【二分查找】Leetcode 在排序数组中查找元素的第一个和最后一个位置

题目解析 34. 在排序数组中查找元素的第一个和最后一个位置 我们使用暴力方法进行算法演化&#xff0c;寻找一个数字的区间&#xff0c;我们可以顺序查找&#xff0c;记录最终结果 首先数组是有序的&#xff0c;所以使用二分法很好上手&#xff0c;但是我们就仅仅使用上一道题…
阅读更多...
最新文章

Copyright @ 2022~2023