uniapp弹幕

效果图

barrage.vue

<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="index">
			<view v-if="item.display" class="aon" :style="{top: `${item.top}rpx`}">
				<view class="bbg">
					<image
						:src="item.sex == 0 ? 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon/girl.png' : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon/boy.png'"
						mode="" class="bbg-head"></image>
					<view class="bbg-phone">
						{{item.phone}}
					</view>
					<view class="bbg-phone">
						{{item.prize}}
					</view>
					<image :src="item.img" mode="" class="bbg-img"></image>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	let cycle;
	import { mathSub,mathMul,mathAdd } from '@/utils/mathUtils.js'
	// 弹幕字体颜色
	function getRandomColor() {
		let rgb = []
		for (let i = 0; i < 3; ++i) {
			let color = Math.floor(Math.random() * 256).toString(16)
			color = color.length == 1 ? '0' + color : color
			rgb.push(color)
		}
		return '#' + rgb.join('')
	}

	export default {
		name: 'l-barrage',
		props: {
			minTime: {
				type: Number,
				default: 6
			},
			maxTime: {
				type: Number,
				default: 14
			},
			minTop: {
				type: Number,
				default: 10
			},
			maxTop: {
				type: Number,
				default: 40
			}
		},
		data() {
			return {
				items: [],
			}
		},
		methods: {
			add(item, time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime +
				1) + this.minTime))) {
					// let op = mathAdd(mathMul(mathAdd(Math.floor(Math.random()*5) , 1),50),100)
					let op = mathAdd(mathMul(Number(item.top),50),100)
				this.items.push({
					prize:item.prize,//奖品名称
					phone:item.phone,//中奖者电话
					time,//时间
					top: op,//距离顶部高度
					// top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
					display: 1,
					sex:item.sex,//中奖者性别
					img:item.prizeImg //奖品图片
				});
			},
			start(items = []) {
				this.items = [];
				cycle && (clearInterval(cycle));
				let i = 0,
					len = items.length;

				cycle = setInterval(() => {
					let time = 5;
					// #ifndef H5
					time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
					// #endif

					if (i < len) {
						// this.add(items[i].phone, items[i].prize, items[i].sex, time);
						this.add(items[i], time);
						i++;
					} else {
						clearInterval(cycle);
						setTimeout(() => {
							this.$emit("end", {});
						}, time * 1000)
					}
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	.aon {
		position: absolute;
		white-space: nowrap;

		animation: mymove 10s linear forwards;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		animation-fill-mode: forwards;
		height: 48rpx;
		padding: 0 1rpx;
	}

	.l-barrage {
		z-index: 3;
		width: 100%;
		position: absolute;
	}

	@keyframes mymove {
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-moz-keyframes mymove

	/* Firefox */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-o-keyframes mymove

	/* Opera */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	.bbg {
		height: 48rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #FFBC78 0%, #ED7361 29%, #EB6262 57%, #A087F6 100%);
		padding-right: 20rpx;

		.bbg-head {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
		}

		.bbg-phone {
			color: #ECECEC;
			font-size: 24rpx;
			line-height: 24rpx;
			margin-left: 24rpx;
		}
		.bbg-img{
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			margin-left: 20rpx;
		}
	}
</style>

需要用到的页面

<!-- @end执行结束回调 -->
<barrage ref="lBarrage" @end="getWinActive"></barrage>

import barrage from './barrage.vue'
getWinActive(){
	let webList = this.getWinList()
	this.$refs.lBarrage.start(webList)
},
//winIndex一次展示几条弹幕
getWinList(winIndex=2){
	let phoneHead = [13,17,15,18,19] //电话号码开头
	let len = mathAdd(Math.floor(Math.random()*winIndex),1)
	let webList = []
	let prizeText = [
		'一发入魂','欧气三连','霸气五连','十连冲天'
	]
	let lvText = [
		'普通','稀有','珍贵','尊享'
	]
	let prizeImg = [
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/XwaPSGwg.jpg',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/tE4cdr0g.jpg',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/2m9ZM7bn.jpg',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/96Ejjiml.jpg',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/iylrOr2k.png',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/uAnfAhLj.png',
		'https://box-mymm.oss-cn-hangzhou.aliyuncs.com/product/XQ0BR78m.png',
	]
	let prize = [
		'开中了【尊享级奖品】',
		'开中了【珍贵级奖品】',
		'开中了【稀有级奖品】'
	]
	for(let i = 0;i<len;i++){
		let imgIndex = Math.floor(Math.random()*7)
		let sexIndex = Math.floor(Math.random()*10)
		let phoneIndex = Math.floor(Math.random()*5)
		let phoneLast = mathAdd(Math.floor(Math.random() * 8998),1000)
		let prizeIndex = Math.floor(Math.random()*4)
		let lvIndex = Math.floor(Math.random()*4)
		let prizeI = Math.floor(Math.random()*3)
		let obj = {
			sex:sexIndex % 2 == 0 ? 0 : 1,
			phone:`${phoneHead[phoneIndex]} **** ${phoneLast}`,
			prize: prize[prizeI],
			top:i,
			prizeImg:`https://box-mymm.oss-cn-hangzhou.aliyuncs.com/wish/guangbo/level${prizeI}.png`,
		}
		webList.push(obj)
	}
	return webList
},