html5视频网站开发,网站建设柳市,抚顺网站建设,清远头条新闻界面展示
主要使用到uniap中的movable-area#xff0c;和movable-view组件实现。 代码逻辑分析
1、使用movable-area和movea-view组件#xff0c;用于座位展示
div classui-seat__boxmovable-area classui-movableAreamovab…界面展示
主要使用到uniap中的movable-area和movable-view组件实现。 代码逻辑分析
1、使用movable-area和movea-view组件用于座位展示
div classui-seat__boxmovable-area classui-movableAreamovable-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 classui-movableAreamovable-view directionall :out-of-boundsfalse :scalefalse classui-movableView:style{width:60 * whData.width px,height:40 * whData.height px} changehandleMovescale-max1.5damping200scalehandleSize/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_ycanBuy表示能否购买此座位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 classui-movableAreamovable-view directionall :out-of-boundsfalse :scalefalse classui-movableView:style{width:60 * whData.width px,height:40 * whData.height px} changehandleMovescale-max1.5damping200scalehandleSize/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 classui-movableAreamovable-view directionall :out-of-boundsfalse :scalefalse classui-movableView:style{width:60 * whData.width px,height:40 * whData.height px} changehandleMovescale-max1.5damping200scalehandleSizeview classui-seat!-- 座位 --view classui-item v-foritem in seatList :keyitem.id:style{top:30 * item.seat_y px,left:50 * item.seat_x px}clickhandleSelect(item)view classui-item__class__can v-ifitem.canBuy{{item.seat_x}},{{item.seat_y}}/viewview classui-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 classui-item__class__can v-ifitem.canBuy{{item.seat_x}},{{item.seat_y}}/view view classui-item__class v-else{{item.seat_x}},{{item.seat_y}}/view/view 关于能否选择座位使用v-if来进行判断
6、左边列表展示 movable-area classui-movableAreamovable-view directionall :out-of-boundsfalse :scalefalse classui-movableView:style{width:60 * whData.width px,height:40 * whData.height px} changehandleMovescale-max1.5damping200scalehandleSizeview classui-seat!-- 座位 --view classui-item v-foritem in seatList :keyitem.id:style{top:30 * item.seat_y px,left:50 * item.seat_x px}clickhandleSelect(item)view classui-item__class__can v-ifitem.canBuy{{item.seat_x}},{{item.seat_y}}/viewview classui-item__class v-else{{item.seat_x}},{{item.seat_y}}/view/view!-- 列表 --view classui-list :style{left: moveX px}view classui-list__item v-fori in whData.height :keyindex{{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)},
完整代码
templateview classcontentview classui-top电影信息/viewview classui-body以下是座位控制/viewdiv classui-seat__boxmovable-area classui-movableAreamovable-view directionall :out-of-boundsfalse :scaletrue classui-movableView:style{width:60 * whData.width px,height:40 * whData.height px} changehandleMovescale-max1.5damping200scalehandleSizeview classui-seat!-- 座位 --view classui-item v-foritem in seatList :keyitem.id:style{top:30 * item.seat_y px,left:50 * item.seat_x px}clickhandleSelect(item)view classui-item__class__can v-ifitem.canBuy{{item.seat_x}},{{item.seat_y}}/viewview classui-item__class v-else{{item.seat_x}},{{item.seat_y}}/view/view!-- 列表 --view classui-list :style{left: moveX px}view classui-list__item v-fori in whData.height :keyindex{{i 1}}/view/view/view/movable-view/movable-area/div/view
/templatescriptimport 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)}}}
/scriptstyle scopedview {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;
