uniapp：实现弹幕效果

sunly_

已于 2023-11-06 09:17:32 修改

阅读量1.1k

点赞数

分类专栏： uniapp 文章标签： uni-app java 算法

于 2023-09-23 10:58:19 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/133200345

版权

一个好用的弹幕效果插件，亲测有效，插件地址：弹幕动起来

<!-- 弹幕组件 -->
<view class="danmu">
	<lff-barrage ref="lffBarrage" :maxTop="120" :minTop="10"></lff-barrage>
</view>

danmuList :[
	'一帆风顺',
	'二龙腾飞',
	'三羊开泰',
	'四季平安',
	'五福临门',
	'六六大顺',
	'七星高照',
	'八方来财',
	'九九同心',
	'十全十美！',
	'新年快乐'
]
onLoad() {
   
	let index = 0
	setInterval(() => {
   
		index++
		if(index < this.danmuList.length){
   
			this.$refs.lffBarrage.add({
   
				item: this.danmuList[index]
			});
		}
	},1000)
}

lff-barrage子组件内容
父级元素：
position: absolute在父级内部弹
position: fixed; 全屏弹幕

<template>
	<view style="overflow: hidden;position: absolute;width: 100%;height: 100%;pointer-events: none; top: 0;">
		<view class="danmu-li" v-for="(item,index) in listData" :class="item.type" :style="item.style" :key="index">
			<view class="danmu-inner">
				<view class="user-box">
					<view class="user-status cl1">
						{
  {item.item}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script