弹幕 Barrage

---

在线预览

在线模拟尺寸:

介绍

弹幕，当前版本比较初级。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-barrage/x-barrage.uvue

使用

<x-barrage></x-barrage>

Props 属性

名称	说明	类型	默认值
layerHeight	弹幕的总高度。如果你的容器高小于此高会被裁切。	string	""
list	字符数组	string[]	() : string[] => [] as string[]

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据
default	默认内容插槽，内容的高度至少要大于弹幕整体的layerHeight高度。	-

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/fankui/barrage

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<view>
		<x-sheet color="primary">
			<x-barrage :list="list" layerHeight="160rpx">
				<x-sheet :margin="['0']" >
					<x-text font-size="18" class=" text-weight-b mb-8">弹幕 Barrage</x-text>
					<x-text color="#999999" >
						主要是营销使用，比如安蕾尔活动的滚动，互动等。
						本弹幕是比较初级的，不支持暂停，重播，因为牵涉计算滚动位置（耗性能），因此初版本采用自然动画。如果要重设内容，只需要重新赋值即可，位置和内容会自动更新。
						如果有需求，将使用绘制来重新改写模板。
					</x-text>
					<x-button class="mt-32" :block="true" @click="restart">重新播放</x-button>
				</x-sheet>
			</x-barrage>
		</x-sheet>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const list = ref([
		"老子6666",
		"陈**已购买1万大礼包",
		"李世民来了哦",
		"哦豁~",
		"那个甄姬太坏了，巴不得早点死！",
		"我看Xui非常好用。推荐",
		"TMUI.DESIGN",
		"大家都是VIP8，躁起来！！！",
		"不错。",
	])
	
	const restart = () => {
		list.value = [
			"老子6666",
			"陈**已购买1万大礼包",
			"李世民来了哦",
			"哦豁~",
			"那个甄姬太坏了，巴不得早点死！",
			"我看Xui非常好用。推荐",
			"TMUI.DESIGN",
			"大家都是VIP8，躁起来！！！",
			"不错。",
		]
	}
</script>


<style lang="scss">

</style>