购买成功悬浮弹窗实现

效果如下，弹窗后几秒钟消失

<view class="tanchuang" v-show="showbarrage">
	<view class="tanchuang-s" >
		<image :src="list[timenum].src" mode="" style="width: 20px;height: 20px;"></image>
		<text>{{list[timenum].nickname}}</text>
	</view>
</view>

计时器定时循环内部数据

data定义变量
data(){
	return{
		list:[],
		timenum:0,
		showbarrage:true,
	}
}，
methods:{
getbarrage(){
	var that = this
	//网络=获取到信息
	this.list = res.data.data
	//添加循环定时器
	setInterval(function(){
		that.barrage()
	},5000);
},
barrage(){
	if(this.timenum<(this.barragelist.length-1)){
		this.timenum += 1
	}else{
		this.timenum = 0
	}	
},
}

css代码

.tanchuang{
	position: fixed;
	padding:0px 10px 0px 7px;
	height: 29px;
	background-color:rgba(0, 0, 0, 0.5);//背景颜色透明度
	z-index: 100;
	border-radius: 112px;
	margin: 10px 10px;
	text-align:center;
	line-height:29px;
	display: block;
	animation: fadeinout 5s infinite;//定义弹出时间
}
@keyframes fadeinout {
//自定义事件节点x%，多少秒按%比分，多少份之间自己定义透明度，opacity是透明度，
  0% {opacity: 0;}//0%秒，例如我定义了10秒，这里就是0秒.
  25%{opacity: 1;}//25%秒，这里是2.5秒...
  75% {opacity: 1;}//这里是7.5秒...，以此类推
  100% {opacity: 0;}
}
.tanchuang-s{
	display: flex;
	align-items: center;
	color: #fff;
}
.tanchuang-s image{
	border-radius: 112px;
	margin-right: 5px;
}