背景:影城移动点餐web App增加会员卡支付功能
需求:确认订单页点击会员卡项弹出会员卡列表,多张会员卡依次叠加覆盖上一张80%的高度,点击任意卡片则改卡片置为当前卡片,只有当前卡片显示全部卡片信息。
经过一天的分析和尝试造出了轮子,基本满足需求,核心代码如下:
html代码:
:class="[item.bgColor ,'z'+item.zIndex, 't'+item.zIndex*30]"
@click.stop="changeArrIndex(index)">
{{item.text}}
js代码:
export default {
// props: [],
data() {
return {
cardArrs: [
{
text: "card-1",
zIndex: 1,
bgColor: "red"
},
{
text: "card-2",
zIndex: 2,
bgColor: "blue"
},
{
text: "card-3",
zIndex: 3,
bgColor: "yellow"
},
{
text: "card-4",
zIndex: 4,
bgColor: "green"
},
{
text: "card-5",
zIndex: 5,
bgColor: "black"
}
],
maxLength: 5
}
},
methods: {
changeArrIndex(index){
// if(index == this.maxLength - 1) {
// return;
// }
let _zIndex = "";
let _newArr = [];
this.cardArrs.forEach((item,idx)=> {
let _obj = {};
if(idx == index) {
_zIndex = item.zIndex;
_obj.zIndex = this.maxLength;
_obj.bgColor = item.bgColor;
_obj.text = item.text;
_obj.flag = true;
_newArr.push(_obj)
}else {
_newArr.push(item)
}
});
_newArr.forEach((obj)=>{
if(obj.zIndex == this.maxLength && !obj.flag) {
obj.zIndex = _zIndex;
}
});
_newArr.map((item)=>{
delete item.flag;
});
this.cardArrs = _newArr;
}
}
}
css代码:
.container {
width: 500px;
height: 300px;
padding: 20px;
border: 1px solid #ccc;
position: relative;
}
.card-item {
width: 300px;
height: 200px;
line-height: 198px;
text-align: center;
font-size: 18px;
border-radius: 5px;
position: absolute;
}
.card-item.t30 {
top: 30px;
animation: positionAnimate1 1.1s
}
.card-item.t60 {
top: 60px;
animation: positionAnimate1 0.9s
}
.card-item.t90 {
top: 90px;
animation: positionAnimate1 0.7s
}
.card-item.t120 {
top: 120px;
box-shadow: 0 0 2px 2px #fff;
animation: positionAnimate 0.5s
}
.card-item.t150 {
top: 150px;
box-shadow: 0 0 2px 2px #fff;
animation: positionAnimate 0.3s
}
@keyframes positionAnimate1 {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes positionAnimate {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.card-item.z1 {
z-index: 1;
}
.card-item.z2 {
z-index: 2;
}
.card-item.z3 {
z-index: 3;
}
.card-item.z4 {
z-index: 4;
}
.card-item.z5 {
z-index: 5;
}
.card-item.red {
border: 1px solid red;
background-color: red;
}
.card-item.blue {
border: 1px solid blue;
background-color: blue;
}
.card-item.yellow {
border: 1px solid yellow;
background-color: yellow;
}
.card-item.green {
border: 1px solid green;
background-color: green;
}
.card-item.black {
border: 1px solid black;
background-color: black;
}