# t-barrage

Barrage 弹幕

t-barrage 组件介绍

t-barrage 是一个基于 Canvas 绘制的弹幕组件，采用高性能 Canvas 绘制技术，减少 DOM 渲染，在页面中实现流畅的滚动文字效果。组件支持自定义弹幕的样式、速度和内容，适用于直播、互动活动等场景，提升用户体验和互动性。

t-barrage 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-barrage 基础用法

基础用法参考 demo/barrage/barrage.uvue，通过 ref 获取组件实例，调用 createDanmu 方法创建弹幕。

<template>
	<view class="p-15">
		<t-card class="mb-15" title="Barrage 弹幕" sub-title="canvas绘制"></t-card>
		<t-section class="mb-15" title="500ms 随机发送一条评论+随机速度+随机字体大小"></t-section>
		<t-col class="dr mb-15 r-10 bg-#fff  bg-#000 h-225">
			<t-barrage ref="tuibarcode" class="r-10 da di-0"></t-barrage>
		</t-col>
	</view>
</template>

<script setup>
	import { getRandomInt } from '@/uni_modules/tui-common'
	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)
		}, 1000)
	})
	onUnload(() => {
		clearInterval(timer)
	})
</script>

t-barrage Props

属性名	说明	类型	默认值
trackHeight	弹幕轨道的高度	number	30

Methods

方法名	说明	参数
createDanmu	创建弹幕	text: string (弹幕内容), fontSize: number (字体大小), speed: number (弹幕速度)