Barrage 弹幕

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="弹幕" class="p.30">
		<t-card class="mb.30" title="Barrage 弹幕" sub-title="canvas绘制性能标杆"></t-card>
		<t-section class="mb.30" title="500ms 随机发送一条评论+绘制背景"></t-section>
		<t-col class="dx-mb.30-tdr">
			<video style="width: 100%;height:450rpx;" :autoplay="true" :muted="true"
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"></video>
			<t-barrage ref="tuibarcode" class="tdr-da-dltr.0"></t-barrage>
		</t-col>
		<t-section class="mb.30" title="关闭背景+随机颜色+随机字体大小"></t-section>
		<t-col class="dx-tdr">
			<video style="width: 100%;height:450rpx;" :autoplay="true" :muted="true"
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"></video>
			<t-barrage ref="tuibarcode1" class="tdr-da-dltr.0" :drawBackground="false"></t-barrage>
		</t-col>
	</t-page>
</template>

<script setup>
	import { getRandomInt } from '@/uni_modules/t-ui'
	const tuibarcode = ref<TBarrageComponentPublicInstance | null>(null)
	const tuibarcode1 = ref<TBarrageComponentPublicInstance | null>(null)
	let timer = 0
	let timer1 = 0
	function getRandomHexColor() : string {
		let color = '#';
		for (let i = 0; i < 6; i++) {
			color += Math.floor(Math.random() * 16).toString(16);
		}
		return color;
	}
	onReady(() => {
		timer = setInterval(() => {
			const ins = tuibarcode.value!
			ins.addDanmu(`弹幕_${getRandomInt(1, 999)}`, "#ffffff", 14)
			const ins1 = tuibarcode1.value!
			ins1.addDanmu(`弹幕_${getRandomInt(1, 999)}`, getRandomHexColor(), getRandomInt(14, 20))
		}, 500)
	})
	onUnload(() => {
		clearInterval(timer)
	})
</script>

Props

名称	描述	类型	默认值	可选值
drawBackground	是否绘制弹幕背景	Boolean	true	true, false

Events

事件名	描述	参数	版本
addDanmu	添加弹幕事件	-(String:弹幕内容,String:弹幕颜色,String:弹幕滚动时间)	-

Slots

名称	描述
default	默认插槽，用于放置弹幕内容