hi~ 大家好，我叫内孤，一名web前端开发者/:B-，在小程序实现在线选座实战(中)里我们搭建完了layout，下面我们来实现最核心的选座。
在实现选座组件前，我们这里先介绍一下，我们需要的座位表数据结果
[
{
"id": 1,
"price": 4,
"x": 1,
"y": 1
}
]
其中x、y代表这个座位在整个座位表中的横轴和纵轴坐标，下面我们就针对这个数据结果展开实现这个选座组件
1. 首先创建Seat.js文件，并且初始化基本架子:
var Seat = (function(factory) {
return factory.call();
}(function() {
var __CORE__ = {
init: function() {
},
render: function() {
},
setData: function() {
}
};
return __CORE__;
}));
下面创建并且在init初始化模版:
// __CORE__ 里面的方法
init: function(options) {
this.$el = document.querySelector(options.el);
this.data = [];
this.selectedData = [];
this.$el.innerHTML = this._getDefaultTpl();
},
_getDefaultTpl: function() {
return (
'<div class="seatComponent">' +
'<div class="screen">' +
'<span class="title">舞台</span>' +
'</div>' +
'<div class="seat-container">' +
'</div>' +
'</div>'
);
},
这里还需要动态的计算seatComponent和seat-container的大小
// 添加计算容器的大小
_computedContainerSize: function() {
var seatContainer = this.$node.parentNode.getBoundingClientRect();
return {
width: seatContainer.width,
height: seatContainer.height
};
}
// 修改init
init: function(options) {
this.$el = document.querySelector(options.el);
this.data = [];
this.selectedData = [];
this.$el.innerHTML = this._getDefaultTpl();
this.$node = this.$el.querySelector('.seatComponent');
// 获取座位容器主要的区域
var $seatViewContainer = this.$node.querySelector('.seat-container');
this.layer = $seatViewContainer;
// 初始化设置容器的大小
var boxSize = this._computedContainerSize();
this.$node.style.width = boxSize.width + 'px';
this.$node.style.height = boxSize.height + 'px';
$seatViewContainer.style.width = boxSize.width + 'px';
// 42 是舞台模块写死的height+margin
$seatViewContainer.style.height = boxSize.height - 42 + 'px';
}
在渲染座位前，我们先写一个setData方法来注入座位信息
setData: function(data) {
this.data = data;
this._renderSeat();
},
// 渲染座位表
_renderSeat: function() {
var me = this;
var data = me.data;
if (!data.length) return;
var seatsList = this._createdSeat(data);
this.layer.innerHTML = seatsList;
},
_createdSeat: function(data) {
var me = this;
var seatsList = '';
var width = this.width - 20; // 减去20为了给整个座位表添加一个padding
var maxSize = this._getWrapperSize(data);
// 计算一个座位的大小
var seatWidth = parseInt(width / maxSize.x);
// 计算整个座位表x轴占满后，剩余的宽度
var overWidth = width - maxSize.x * seatWidth;
// 计算左右可用padding
var offsetLeft = Math.floor(overWidth / 2);
for (var i = 0, len = data.length; i < len; i++) {
var item = data[i];
var _seatLeft = seatWidth * item.x + offsetLeft;
var _seatTop = seatWidth * item.y;
// -2 为了空出座位和座位之间的间隙
var _seatWidth = seatWidth - 2;
var _seatHeight = seatWidth - 2;
var style = 'position: absolute; transform: matrix(1, 0, 0, 1,' + _seatLeft.toFixed(1) + ',' + _seatTop.toFixed(1) + '); width:' + _seatWidth.toFixed(1) + 'px;height:' +
_seatHeight.toFixed(1) + 'px;background-color:' + (item.status === 0 ? '#fff' : '#989898') + ';';
seatsList += '<div class="seat ' + 'seatId-' + item.id + '" data-index="' + i + '" data-type="seat" data-id="' + item.id + '" data-status="' + item.status + '" style="' + style + '"></div>';
}
return seatsList;
},
// 获取seat中最大的x和y
_getWrapperSize: function(list) {
var maxX = 0;
var maxY = 0;
if (!list) list = [];
for (var i = 0, len = list.length; i < len; i++) {
if (list[i].x > maxX) {
maxX = list[i].x;
}
if (list[i].y > maxY) {
maxY = list[i].y;
}
}
return {
x: maxX,
y: maxY
};
}
通过_getWrapperSize方法算出最大x和y，然后根据容器的大小算出每一个座位占用的大小。绝对定位每一个座位，一个座位的left：“座位大小座位的x+偏移量”，top：“座位大小座位的y”，这样遍历整个座位列表我们就可以得到整个座位图:
image.png
接下去实现，拖动座位图和放大缩小功能:
_onTouchLayer: function() {
var me = this,
startX,
startY,
distance = {},
origin,
scale;
me.isMove = false;
me.isCanScale = false;
me.scale = 1;
me.$node.addEventListener('touchstart', function(e) {
e.preventDefault();
me.isMove = false;
if (e.touches.length === 1) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
} else if (e.touches.length > 1) {
// 开始缩放
me.isCanScale = true;
distance.start = me._getDistance({
x: e.touches[0].clientX,
y: e.touches[0].clientY
}, {
x: e.touches[1].clientX,
y: e.touches[1].clientY
});
}
}, false);
me.$node.addEventListener('touchmove', function(e) {
e.preventDefault();
var moveX, moveY, disX, disY;
if (e.touches.length === 1) {
moveX = e.touches[0].clientX;
moveY = e.touches[0].clientY;
disX = Math.round(moveX - startX);
disY = Math.round(moveY - startY);
if (Math.abs(disX) + Math.abs(disY) > 0) {
me.isMove = true;
}
startX = moveX;
startY = moveY;
// 执行移动
me._transformLayer(disX, disY);
} else if (e.touches.length === 2) {
origin = me._getOrigin({
x: e.touches[0].clientX,
y: e.touches[0].clientY
}, {
x: e.touches[1].clientX,
y: e.touches[1].clientY
});
distance.stop = me._getDistance({
x: e.touches[0].clientX,
y: e.touches[0].clientY
}, {
x: e.touches[1].clientX,
y: e.touches[1].clientY
});
scale = Math.ceil(distance.stop / distance.start + me.scale - 1);
if (scale >= 2) {
me.scale = 5;
} else {
me.scale = 1;
}
if (distance.stop - distance.start > 0) {
// 放大
me.scale = scale;
if (scale > 5) me.scale = 5;
} else if (distance.stop - distance.start < 0) {
// 缩小
me.scale -= scale;
if (scale < 5) me.scale = 1;
}
me.isMove = true;
me._scaleLayer(origin, me.scale);
}
}, false);
me.$node.addEventListener('touchend', function(e) {
e.preventDefault();
me.isCanScale = false;
if (me.scale === 1) {
me._resetTransFormLayer();
}
}, false)
},
_scaleLayer: function(origin, scale) {
var x, y;
x = origin.x + (-origin.x) * scale;
y = origin.y + (-origin.y) * scale;
this.layer.style.transform = 'translate3d(' + this.layerLeft + 'px, ' + this.layerTop + 'px, 0) scale(' + scale + ')';
},
_transformLayer: function(disX, disY) {
var me = this;
// 如果正在缩放，则不进行移动
if (me.isCanScale) true;
if (this.layerTop > 100) {
this.layerTop = 100;
}
if (me.scale === 5) {
// doc.querySelector('.sureBtn').innerText = disY
if (this.layerLeft >= 900 && disX > 0) {
disX = 0;
}
if (this.layerLeft <= -900 && disX < 0) {
disX = 0;
}
if (this.layerTop <= -1000 && disY < 0) {
disY = 0;
}
}
this.layerLeft += disX;
this.layerTop += disY;
// 开启3D加速移动位置
this.layer.style.transform = 'translate3d(' + this.layerLeft + 'px, ' + this.layerTop + 'px, 0) scale(' + me.scale + ')';
},
_resetTransFormLayer: function() {
this.layer.style.transform = 'translate3d(' + this.oldLayerLeft + 'px, ' + this.oldLayerTop + 'px, 0) scale(' + this.scale + ')';
this.layerLeft = this.oldLayerLeft;
this.layerTop = this.oldLayerTop;
},
_getOrigin: function(first, second) {
return {
x: (first.x + second.x) / 2,
y: (first.y + second.y) / 2
};
},
_getDistance: function(start, stop) {
return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));
}
这里监听容器的touchstart 、touchmove 、touchend判断e.touches.length长度来判断指数，进行缩放或者移动的处理。
下面写监听点击了座位的事件，并抛出外部数据
_onTouchSeat: function () {
var me = this;
this.layer.addEventListener('touchend', function (e) {
e.preventDefault();
if (me.isMove) return;
var target = e.target;
var type = target.getAttribute('data-type');
var id = target.getAttribute('data-id');
var status = target.getAttribute('data-status');
var index = target.getAttribute('data-index');
var data = me.data;
if (type && type === 'seat') {
// 如果状态为0, 则可以进行选择
if (status == 0) {
// 检测当前是取消还是选中
if (target.className.indexOf('active') > -1) {
// 取消
target.className = target.className.replace('active', '');
target.style.backgroundColor = '#fff';
me._removeSelectedSeat(id, data[index], index);
} else {
// 选中
target.className = target.className + ' active';
target.style.backgroundColor = 'inherit';
me._addSelectedSeat(id, data[index], index);
}
}
}
});
},
_addSelectedSeat: function(id, item, index) {
item.index = index;
this.selectedData.push(item);
this._onChange();
},
_removeSelectedSeat: function(id, item) {
var selectedData = this.selectedData;
var index = 0;
var i = 0;
var len = selectedData.length;
for (i; i < len; i++) {
if (selectedData[i] === item.id) {
index = i;
break;
}
}
selectedData.splice(index, 1);
this._onChange();
},
_onChange: function() {
var selectedData = this.selectedData;
this.onChange(selectedData);
}
以上基本已经完成了座位表的功能，不过有一个缺点，不能根据指定缩放位置缩放
