小程序弹幕自动滚动实时更新数据功能

需求

最近遇到的需求，写一个弹幕功能

大致就是实现这样的效果

弹幕轮播，上下两排，一共30个弹幕，30个轮播完毕之后获取新的弹幕数据

实现方法

 目前我想到的实现方法是用css的动画来实现这个功能

              <view class="barrage">
				<view class="barrageBox">
					<view class="barrageList" v-for="(item,index) in barrage1" :key="index">
						
					</view>
				</view>
				<view class="barrageBottom barrageBox">
					<view class="barrageList" v-for="(item,index) in barrage2" :key="index">
						
					</view>
				</view>
			</view>

布局层级

给barrageBox盒子一个相对定位

给barrageList绝对定位 先将list盒子定位到box盒子的右边外面

然后是动画 最开始百分之0的时候在最右边

时间最后结束的时候移动到最左边left给0，然后再移动自身的百分之百到最左边，就可以实现整个盒子都移动到最左边并且隐藏

因为时间是固定的 所以从最右边移动到最左边的时间是一致的，但是盒子给了max-content的属性。盒子宽度根据内容的最大宽带撑开，不同大小的盒子要在同样的时间之内走完，所以会有走得快走得慢的区别，刚刚好也实现了我们现在的需求，盒子的运动速度不同

.barrageList {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				height: 52rpx;
				width: max-content;
				display: flex;
				align-items: center;
				padding: 0 16rpx 0 6rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				position: absolute;
				left: 750rpx;
				top: 0;
				animation: barrageMove 6s linear 1;

				@keyframes barrageMove {
					0% {
						left: 750rpx;
					}

					100% {
						left: 0;
						transform: translateX(-100%);
					}
				}
}

到了这个时候其实已经可以看到盒子的运动了，但是目前只有一条数据

如果一次性把所有的数据渲染，那么就会出现所有数据堆叠在一起的情况

这个时候我想到的是，动态数据，因为每次渲染一个新的数据的时候，都会重新给这个数据css，也就是都会从最右边隐藏的地方开始渲染

然后就是写算法了

先在data里面给两个数据列表

       data() {
			return {
			
				// 弹幕数据
				barrage1: [],
				barrage2: [],


			};
		},

接下来就是获取后台的数据，没有数据的时候可以自己进行模拟数据

			async getbarrageList() {
				// 每次调用方法的时候都把两个列表数据清空，避免出现数据堆叠
				this.barrage1 = []
				this.barrage2 = []
                // 获取到数据之后
				if (res) {
                    // 首先对用户name做处理，我比较懒，就除了名字第一个保留，剩下的用xxx来代替了
					res.forEach(i => {
						i.nickName = i.nickName[0] + 'xxx'
					})
					let n = 0
                    // 重点在这里，设置一个定时器，每过1.2秒判断一次数据，单还是双，分别给第一个列表和第二个列表加入数据
					this.barrageTimer = setInterval(() => {
						if ((this.barrage1.length + this.barrage2.length) < res.length - 1) {
							if ((n + 1) % 2 != 0) {
								this.barrage1.push(res[n])
								n++
							} else {
								this.barrage2.push(res[n])
								n++
							}
						} else {
							clearInterval(this.barrageTimer)
						}
						// console.log(this.barrage1, '1', this.barrage2, '2');
					}, 1200)
				}

			},

我懒得写for循环了，假设获取到数据之后 先对需要处理的数据进行处理，我这里因为需要隐藏用户name，所以先对用户name做了处理

然后定义一个n，作为起始的下标

这个时候需要定义一个定时器 因为后续需要对定时器清除 所以data里面要定义定时器

 data() {
			return {
			
				// 弹幕数据
				barrage1: [],
				barrage2: [],

                barrageTimerOut: null,
				barrageTimer: null
			};
		},

除了现在用的这个计时器，后续还有一个，所以我两个一起定义了，具体第二个用来干嘛的，等下我会说

然后就是判断数据是否完全分别加入两个列表里面了，如果没有的话，单数的数据加入第一个列表里面，双数的数据加入到第二个数据里面，我们需求是1.2秒加一条数据，刚好这样能形成数据的错开，n的下标是从0开始的 我们一共是30条数据 所以算是单双的时候需要+1，算数据是否完毕的时候，因为第一条数据判断是两个列表都为0的时候，所以总数的res.length需要-1。

这个时候再回头去看弹幕，已经开始滚动起来了

实现原理

实现的原理就是动态数据，每次间隔一段时间渲染一条数据，每次渲染数据的时候会重新赋一个class，css属性会给初始值也就是在最右边，同时也会开始动画，6秒的时间，从最右边到最左边，而新数据渲染的时候，之前渲染的数据已经在往左边走了，所以两条数据会错开，就会有滚动的效果，如果要实现无限滚动，只需要用第二个动画，把循环次数改为infinite无限就行

				animation: barrageMove 6s linear 1;
				animation: barrageMove 6s linear infinite;

实现过一段时间刷新新的弹幕数据

先上代码

        onShow() {
			this.barrage1 = []
			this.barrage2 = []
			if (this.barrageTimerOut) {
				clearInterval(this.barrageTimerOut)
			}
			this.getbarrageList()
			this.barrageTimerOut = setInterval(() => {
				this.getbarrageList()
			}, 42000)
		},
		onHide() {
			console.log('hide');
			clearInterval(this.barrageTimerOut)
			clearInterval(this.barrageTimer)
		},

在获取数据之前，记得一定要在onshow里面先把两个列表数据进行一次清空，不清空的话，可能会出现数据堆叠的情况，我写代码喜欢多写一次判断，判断是否有定时器存在，没有被清除，有的话先把定时器清除

然后说一下算法为什么是需求是30条数据后获取新数据，我要写42秒

算法是1.2秒*30条数据+最后一条数据完全走完所需的时间6秒

1.2*30+6 就是所有数据完全走完所需要的时间，如果没有完全走完的话就获取新的数据的话，会出现数据还没走完，然后就被完全清空的情况，我们觉得不美观，数据突然消失，所以还是在数据走完后获取

在onshow里写定时器，每过42秒获取新数据，就可以实现弹幕的实时更新，最后记得，离开页面的时候，把所有的定时器清除，如果觉得onHide不保险，可以在onUnload里面也写一次

补充

今天测试发现的一个bug，数据如果后端忘记做限制最大30条的时候会出现bug，所以在获取到数据的时候要做一个判断

let newArr=[]                    
if(res.length>30){
    newArr=res.slice(0,30)
}else{
    newArr=res                      
}

截取数据到只有30条，后续的res替换成resArr就行

作为保险

onShow里面的定时器里面记得清除调用方法时候的计时器

         onShow() {
			this.barrage1 = []
			this.barrage2 = []
			if (this.barrageTimerOut) {
				clearInterval(this.barrageTimerOut)
			}
			this.getbarrageList()
			this.barrageTimerOut = setInterval(() => {
				clearInterval(this.barrageTimer)
				this.getbarrageList()
			}, 42000)
		},

this.barrageTimerOut = setInterval(() => {
                clearInterval(this.barrageTimer)
                this.getbarrageList()
            }, 42000)