fanyunAi/components/vastwu-barrage/vastwu-barrage.vue

<template>
	<view class="">
		<view class="vastwu-barrage" :style="{width:width,height:height}" v-if="textList1.length">
			<block v-for="(item,index) in items" :key="index">
				<!-- 每个盒子不一定只放一个 -->
				<view class="barrages" :style="{top: `${trackList[index]}rpx`
					  		  }">
					<view class="barrage" v-for="(tx,i) in item.textList" :key="i" @click="handleClick(tx)">
						{{tx.text}}
					</view>
					<view class="barrage" v-for="(tx,i) in item.textList" :key="i+99" @click="handleClick(tx)">
						{{tx.text}}
					</view>
				</view>
			</block>
		</view>
		<view v-else class="vastwu-barrage" :style="{width:width,height:height}"
			style="display: flex;justify-content: center;align-items: center;">
			<image src="@/static/images/err.png" mode="" style="width: 100rpx;;height: 80rpx;"></image>暂无热门提问,换一换试试~
		</view>
	</view>


</template>

<script>
	export default {
		name: 'vastwu-barrage',
		props: {
			textList1: {
				type: Array
			},
			trackList: {
				type: Array,
				default: function() {
					return [0, 100, 200]
				}
			},
			icon: {
				type: String,
				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d0fe8d48-ece3-4582-a195-6929fb47a9c5/43a4f7a7-ff65-4460-b774-1249f31fbef7.png'
			},
			minTime: {
				type: Number,
				default: 7
			},
			maxTime: {
				type: Number,
				default: 10
			},
			width: {
				type: String,
				default: '750rpx'
			},
			height: {
				type: String,
				default: '100%'
			}
		},
		data() {
			return {
				items: [],
				values: '',
				textIndex: 0
			}
		},
		created() {
			this.values = this.items.length
		},
		watch: {
			textList1: {
				handler(n, o) {
					if (n != o) {
						console.log('textList1-----', n);
						this.init(n)
					}
				},
				immediate: true
			}
		},
		methods: {
			handleClick(item) {
				this.$emit('teplateItemClicked', item.text)
			},

			add(text = '', time = this.randomNum(this.minTime, this.maxTime)) {
				if (this.items.length >= this.trackList.length) {
					if (this.textIndex < this.trackList.length) {
						this.items[this.textIndex].textList.push(text);
						this.textIndex++;
					} else {
						this.textIndex = 0
						this.items[this.textIndex].textList.push(text);
						this.textIndex++;
					}
				} else {
					this.items.push({
						textList: [text],
						time,
						color: 'black',
						paused: '',
					});
				}
			},
			init(items = []) {
				this.items = [];
				let i = 0;
				this.values = items.length;

				for (let i = 0; i < items.length; i++) {
					let time = 10;
					time = this.randomNum(this.minTime, this.maxTime);
					this.add(items[i], time);
				}
			},

			//生成从minNum到maxNum的随机数
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			}
		}
	}
</script>

<style>
	.barrages {
		position: absolute;
		white-space: nowrap;
		animation: mymove 15s linear infinite;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		animation-fill-mode: forwards;

		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;

		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		perspective: 1000;
		/* Other transform properties here */
	}

	.barrage {
		position: relative;
		padding: 0 48rpx;
		border-radius: 32rpx;
		background-color: #E5E9EE;
		margin-right: 16rpx;
		display: inline-block;
		font-size: 24rpx;
		height: 56rpx;
		line-height: 56rpx;


		max-width: 480rpx;
		text-overflow: ellipsis;
		overflow: hidden;

	}

	.vastwu-barrage {
		z-index: 3;
		position: relative;
		overflow: hidden;
	}

	@keyframes mymove {
		from {
			/* left: 100%; */
			transform: translateX(0rpx);
		}

		to {
			/* left: -120%; */
			transform: translateX(-50%);
		}
	}

	@-moz-keyframes mymove

	/* Firefox */
		{
		from {
			/* left: 100%; */
			transform: translateX(0rpx);
		}

		to {
			/* left: -120%; */
			transform: translateX(-50%);
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			/* left: 100%; */
			transform: translateX(0rpx);
		}

		to {
			/* left: -120%; */
			transform: translateX(-50%);
		}
	}

	@-o-keyframes mymove

	/* Opera */
		{
		from {
			/* left: 100%; */
			transform: translateX(0rpx);
		}

		to {
			/* left: -120%; */
			transform: translateX(-50%);
		}
	}
</style>