直播间赠送礼物动效、选礼物列表、赠送数量,礼物连发排队处理,Vue项目
1、可以选择送的是礼物列表的哪一个、可以选择送的数量x1x2x32、礼物做了排队展示的处理,可以解决礼物连续发送、监听到别人发送礼物接口数据回调的排队问题,不会冲刷掉礼物动效下面是一个完整的送礼物动效页,可以直接copy到vue项目运行打开<template><div><div class="test_box" v-if="giftAnimation"><
·
1、可以选择送的是礼物列表的哪一个、可以选择送的数量x1x2x3
2、礼物做了排队展示的处理,可以解决礼物连续发送、监听到别人发送礼物接口数据回调的排队问题,不会冲刷掉礼物动效
下面是一个完整的送礼物动效页,可以直接copy到vue项目运行打开
<template>
<div>
<div class="test_box" v-if="giftAnimation">
<img v-if="showGiftList.length" :src="showGiftList[0].giftImage" alt="">
你赠送{{showGiftList.length ? showGiftList[0].liveGiftName : ''}}
</div>
<h1>当前排队的礼物长度{{showGiftList.length}}</h1>
<div class="btn_box">
<button v-for="(item,itemI) in allList" :key="itemI" @click="giftParams.giftIndex = itemI"> {{item.liveGiftName}}</button>
<div>
<button @click="giftParams.giftNum = 1">按钮×1</button>
<button @click="giftParams.giftNum = 2">按钮×2</button>
<button @click="giftParams.giftNum = 3">按钮×3</button>
</div>
<div @click="sendGift" class="mt50">发送</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
allList: [ //总的礼物列表
{giftImage:'https://rdimg.rundejy.com/web/runde_admin/icon_奖杯-1.png',liveGiftName: '奖杯'},
{giftImage:'https://rdimg.rundejy.com/web/runde_admin/icon_鼓掌-1.png',liveGiftName: '鼓掌'}
],
showGiftList: [], // 弹层礼物列表 // '礼物1','礼物2'
giftAnimation: false, // 是否显示礼物动画
giftParams: {
giftIndex: '', // 点击的是礼物列表的第几个
giftNum: 1, // x1x2x3
giftTime: 2000 ,// css里的animation mymove也是一样2s
}
}
},
methods: {
sendGift() {
// 选择x1x2x3拼接数组 或者是监听礼物接口的回调数据拼接进showGiftList
for(let i=1;i<= this.giftParams.giftNum; i++) {
let activeItem = this.allList[this.giftParams.giftIndex];
this.showGiftList.push(activeItem);
}
this.$nextTick(()=>{
if(!this.giftAnimation) { // 动画已经停止了 点了新的礼物 执行新的定时器
this.giftAnimation = true;
let giftAnimation = setInterval(() => {
if(this.showGiftList.length ===1) { // 最后一个数组 也是要停止定时器
this.showGiftList.shift();
clearInterval(giftAnimation);
this.giftAnimation = false;
}else if(this.showGiftList.length) { // 有长度的话 就必须要删除数组
this.showGiftList.shift();
}else { // 没有数组的时候 就要停止定时器
clearInterval(giftAnimation);
this.giftAnimation = false;
}
}, this.giftParams.giftTime);
}else {}// 正在进行动画的话 就不再添加定时器
})
}
}
}
</script>
<style scoped lang="scss">
.mt50 {
margin-top: 50px;
}
.btn_box {
position: fixed;
bottom: 0;
button {
width: 200px;
}
}
.test_box {
animation: mymove 2s infinite;
height: 30px;
position: fixed;
top: 100px;
left: -160px;
img {
width: 50px;
vertical-align: middle;
}
}
@keyframes mymove { //滑动出来1s 停留展示1s
0% {left: -160px;display: none;}
1% {left: -160px;display: block;}
50% {left: 200px}
99% {left: 200px}
100% {left: 200px;display: none;}
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)