uni-app实现小程序无限弹幕

<view class="content"><view class="detail_img"><view class="bottom"></view><view class='dmGroup' v-for="(item,index) in dmData" :key="index"v-bind:style="{top:item.top +'%',

种一棵树il

1589人浏览 · 2021-09-22 17:19:13

种一棵树il · 2021-09-22 17:19:13 发布

<view class="content">
		<view class="detail_img">
			<view class="bottom"></view>
			<view class='dmGroup' v-for="(item,index) in dmData" :key="index"
				v-bind:style="{top:item.top +'%',animationName:'dmAnimation',animationDuration:item.time + 's',animationTimingFunction:'linear',animationDelay:index*3+'s',animationIterationCount:'infinite',animationPlayState:'running'}">
				<view class='dmItem'>
					<view class='dm'>
							<view class='avatarBox'>
							<image :src='item.avatar' class='avatar' mode='aspectFit'></image>
						</view>
						<text class='content'>{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

data() {
			return {
				dmData:[
					{id:1,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
				    {id:2,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:3,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:4,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:5,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:6,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:7,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:8,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'},
					{id:9,avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c7a5828f-42a8-42d1-8c2d-ef297f432cc3/abafc325-fd24-4596-84dd-240960c5011b.jpg',desc:'领取成功'}
				]
			}
		},
		onLoad() {
			
		},
		onShow(){
			let that = this
			that.setDM(that.dmData)
		},
		methods: {
           // 处理弹幕参数
           setDM(dmData) {
           	let that = this
           	const dmArr = [];
           	const _b = dmData;
           	for (let i = 0; i < _b.length; i++) {
           		const time = Math.floor(Math.random() * 10);
           		const second = Math.floor(Math.random() * 60);
           		const _time = time < 6 ? 6 + i : time + i;
           		const top = Math.floor(Math.random() * 80) + 2;
           		const _p = {
           			id: _b[i].id,
           			desc: _b[i].desc,
           			avatar: _b[i].avatar,
           			top,
           			second,
           			time: _time,
           		};
           		dmArr.push(_p);
           	}
           	that.dmData = dmArr
           },
		}

.detail_img {
		width: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
	}
	.bottom {
		width: 100%;
		height: 300rpx;
	}
	.dmGroup {
		position: absolute;
		top: 140rpx;
		left: 100%;
		z-index: 10;
		animation-timing-function: linear;
		animation-fill-mode: none;
		transform: translateZ(0);
		white-space: nowrap;
		height: 60rpx;
	}
	
	.dmItem {
		display: inline-flex;
		margin-right: 60rpx;
		white-space: nowrap;
	}
	
	.dmItem .dm {
		display: inline-flex;
		vertical-align: middle;
		align-items: center;
		position: relative;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 15rpx 0 15rpx;
		box-sizing: border-box;
		background: rgba(0, 2, 2, 0.28);
		border-radius: 25rpx;
		overflow: hidden;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 1);
	}
	
	.dmItem .avatarBox {
		display: inline-block;
		position: relative;
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.dmItem .avatarBox image{
		width: 40rpx;
		height: 40rpx;
	}
	
	.dmItem .avatarBox .avatar {
		width: 40rpx;
		height: 40rpx;
		border: 0;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.dmItem .dm .content {
		display: inline-block;
		max-width: 500rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-right: 10rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	@keyframes dmAnimation {
		from {
			left: 100%;
		}
	
		to {
			left: -100%;
		}
	}

直接复制看效果