Barrage (弹幕)

高性能canvas绘制，减少DOM渲染，在页面中实现滚动文字效果，让内容展示更加生动有趣。用户可以自定义弹幕的样式、速度和内容，适用于直播、互动活动等场景，提升用户体验和互动性。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-30">
		<t-card main-class="mb-30" title="Barrage 弹幕" sub-title="canvas绘制"></t-card>
		<t-section main-class="mb-30" title="500ms 随机发送一条评论+随机速度+随机字体大小"></t-section>
		<t-col main-class="dr mb-30 tdr tdb h-450 bg-#000">
			<t-barrage ref="tuibarcode" main-class="tdr da dltr-0"></t-barrage>
		</t-col>
	</t-page>
</template>

<script setup>
	import { getRandomInt } from '@/uni_modules/tui-plugins'
	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!
			const speed = Math.random() * 2; // 弹幕速度
			ins.createDanmu(`弹幕_${getRandomInt(1, 999)}`, getRandomInt(14, 20), speed)
		}, 500)
	})
	onUnload(() => {
		clearInterval(timer)
	})
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
trackHeight	Number	30	弹幕轨道的高度

方法

名称	参数	返回值	说明
createDanmu	createDanmu(text : string(弹幕文字), fontSize : number（弹幕字体大小）, speed : number（滚动速度参数）){}	-	添加弹幕信息显示
animate	-	-
canvasInit	-	-
measureText	-	-
findAvailableTrack	-	-