更改首页

2024-07-05 18:26:46 +08:00
parent a40cfd9c5f
commit 380a6312f8
19 changed files with 3841 additions and 1179 deletions
--- a/components/l-barrage/l-barrage.vue
+++ b/components/l-barrage/l-barrage.vue
@@ -0,0 +1,181 @@
+<template>
+	<view class="l-barrage">
+		<block v-for="(item,index) in items" :key="index">
+			<!-- #ifdef H5 -->
+			<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color}">
+				{{item.text}}
+			</text>
+			<!-- #endif -->
+
+			<!-- #ifndef H5 -->
+			<!-- <text v-if="item.display" class="aon" 
+					  :style="{top: `${item.top}%`,color: item.color,
+					  animation: `mymove ${Number(item.time)}s linear forwards`
+					  }"
+					>
+						{{item.text}}
+					</text> -->
+			<view v-if="item.display" class="aon"
+				style=" display: flex;justify-content: center;align-items: center; background-color: #000; padding:10rpx; border-radius: 10rpx;"
+				:style="{top: `${item.top}%`,
+					  animation: `mymove ${Number(item.time)}s linear forwards`
+					  }">
+				<image style="width: 50rpx; height: 50rpx;border-radius: 50%;" :src="avatar"
+					mode="aspectFill"></image>
+				<text style="color: #fff;">
+					{{item.text}}
+				</text>
+			</view>
+			<!-- #endif -->
+		</block>
+	</view>
+</template>
+
+<script>
+	let cycle;
+
+	// 弹幕字体颜色
+	function getRandomColor() {
+		let rgb = []
+		for (let i = 0; i < 3; ++i) {
+			let color = Math.floor(Math.random() * 256).toString(16)
+			color = color.length == 1 ? '0' + color : color
+			rgb.push(color)
+		}
+		return '#' + rgb.join('')
+	}
+
+	export default {
+		name: 'l-barrage',
+		props: {
+			minTime: {
+				type: Number,
+				default: 4
+			},
+			maxTime: {
+				type: Number,
+				default: 9
+			},
+			minTop: {
+				type: Number,
+				default: 8
+			},
+			maxTop: {
+				type: Number,
+				default: 16
+			},
+			avatar:{
+				type:String,
+				default:'@/static/1.gif'
+			}
+		},
+		data() {
+			return {
+				items: [],
+				userInfo: uni.cache.get('userInfo'), //个人信息
+			}
+		},
+		methods: {
+			add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this
+				.minTime))) {
+				this.items.push({
+					text,
+					time,
+					top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
+					color: getRandomColor(),
+					display: 1,
+				});
+			},
+			start(items = []) {
+				this.items = [];
+				cycle && (clearInterval(cycle));
+				let i = 0,
+					len = items.length;
+
+				cycle = setInterval(() => {
+					let time = 5;
+					// #ifndef H5
+					time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
+					// #endif
+
+					if (i < len) {
+						this.add(items[i], time);
+						i++;
+					} else {
+						clearInterval(cycle);
+						setTimeout(() => {
+							this.$emit("end", {});
+						}, time * 1000)
+					}
+				}, 500)
+			}
+		}
+	}
+</script>
+
+<style>
+	.aon {
+		position: fixed;
+		white-space: nowrap;
+
+		animation: mymove 5s linear forwards;
+		animation-timing-function: linear;
+		-webkit-animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	.l-barrage {
+		z-index: 99;
+		width: 100%;
+		position: fixed;
+	}
+
+	@keyframes mymove {
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-moz-keyframes mymove
+
+	/* Firefox */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-webkit-keyframes mymove
+
+	/* Safari and Chrome */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-o-keyframes mymove
+
+	/* Opera */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+</style>