插件代码 --这个是5行的 底下可调整

<template>
	<view>
		<view class="prfloat">
			<view class="prfloatitem" v-for="item in liston">
				<view class="prfloatitems" :animation="upro.trsfrom" v-for="upro in item">
					<image :src="upro.srcs" mode="aspectFill"></image>
					<view class="prfloatitemview">{{upro.comm}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let cycle;
	// 顺序取整数
	export default {
		name: "porfloat",
		data() {
			return {
				// 定义一个数组/5行
				liston: [
					[],
					[],
					[],
					[],
					[]
				],
				animation: {},
				uidor: 0,
				utrue: false
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let _this = this;
				this.animation = uni.createAnimation({
					timingFunction: 'linear'
				})
			},
			// 添加数据+动画
			pushitem(item) {
				let arritem = {
					trsfrom: {},
					...item
				}
				this.animation.translateX(-750).step({
					duration: 10000
				}).opacity(1).step()
				arritem.trsfrom = this.animation.export();
				this.liston[this.getRandom()].push(arritem);
				this.clearandff()
			},
			clerOn() {
				//置为空
				this.liston = [
					[],
					[],
					[],
					[],
					[]
				]
				clearInterval(cycle)
			},
			start(items) {
				cycle && (clearInterval(cycle));
				let _this = this;
				let i = 0,
					len = items.length;

				cycle = setInterval(() => {
					if (i < len) {
						_this.pushitem(items[i]);
						i++;
					} else {
						i = 0;
						_this.pushitem(items[i]);
					}
				}, 3000)
			},
			// 清除+重复
			clearandff() {
				let _this = this;
				// 判断数组是否大于30的长度
				let _liston = this.liston;
				_liston.forEach(res => {
					if (res.length >= 30) {
						res.splice(0, 5)
						_this.utrue = true;
					} else {
						_this.utrue = false;
					}
				})
				if (_this.utrue) {
					this.liston = _liston
				}
			},
			// 随机 -- max 参数为数组长度-1
			getRandom(min = 0, max = 4) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
		}
	}
</script>

<style lang="scss">
	.prfloatitemss {
		animation: frpor 10s;
	}

	@keyframes frpor {
		0% {
			transform: translateX(-750upx);
			opacity: 1;
		}

		100% {
			transform: translateX(750upx);
		}
	}

	.prfloat {
		position: absolute;
		width: 100%;
		height: 100%;
		// background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.prfloatitem {
			width: 100%;
			flex: 1;
			@extend %rev;

			.prfloatitems {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 22upx;
				color: #fff;
				background-color: rgba($color: #000000, $alpha: .4);
				position: absolute;
				border-radius: 50upx;
				padding-right: 20upx;
				right: 0;
				transform: translateX(100%);

				.prfloatitemview {
					padding: 0 10upx;
				}

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin-right: 10upx;
				}
			}

		}
	}
</style>

使用–页面定义

<porfloat ref="porfloat"></porfloat>

使用-- js

	// 给个数组即可
	this.$refs.porfloat.start(Array);
	
	// 页面隐藏的时候删除掉
	onHide() {
		this.$refs.porfloat.clerOn();
	}