custom-barrage.vue

<template>
	<view class="dm-container" :style="{left: left + 'px'}">
		<view v-for="(item, index) in danmuList" :key="index" class="dm-item">
			{{ item }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				danmuList: ['弹幕1', '弹幕2', '弹幕3红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'], // 弹幕内容数组
				left: 0,
			}
		},
		mounted() {
			let itemWidth = 0;
			const query = uni.createSelectorQuery();
			query.select('.dm-container').boundingClientRect(data => {
				console.log(data.width); // 输出父元素的宽度
				itemWidth = data.width;
			}).exec();
			console.log(itemWidth);

			// 获取设备信息
			let device = uni.getSystemInfoSync()
			let totalWidth = device.windowWidth + itemWidth;
			this.left = device.windowWidth + 50;
			setInterval(() => {
				if (this.left < -(itemWidth + 50)) {
					this.left = device.windowWidth + 50;
				} else {
					this.left--;
				}
				// 更新弹幕元素的位置
				// 可以使用CSS的transform属性或者改变元素的left属性来实现滚动效果
			}, 10)
		}
	}
</script>

<style>
	.dm-container {
		position: fixed;
		top: 25rpx;
		left: 100%;
		z-index: 10;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-fill-mode: none;
		transform: translateZ(0);
		white-space: nowrap;
		height: 60rpx;
		overflow: hidden;
		color: #fff;
	}

	.dm-item {
		display: inline-flex;
		margin-right: 60rpx;
		white-space: nowrap;
	}
</style>