通告欄-文字上下輪播 | uniapp實現

組件使用

<NoticeBar :list="notice"></NoticeBar>
<!-- NoticeBar 組件名 -->

屬性

屬性名	類型	默認值	說明
list	Array	暫無消息	消息集合
color	String	#de8c17	文字顏色
bgColor	String	#fffbe8	整個橫條的背景色
switchTime	Number	5	每條消息切換時間

組件源碼（需要自行引入）

<template>
	<view>
		<view class="notice-box" :style="'background-color: '+bgColor+';'">
			<view class="notice-icon">
				<uni-icons
				  :color="color"
				  type="sound"
				  size="14"></uni-icons>
			</view>
			<scroll-view class="notice-content">
				<swiper class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
					<swiper-item v-for="(t, index) in list" :key="index" class="notice-content-item">
						<view class="swiper-item">
							<text class="notice-content-item-text" :style="'color: '+color+';'">
								{{t}}
							</text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default: ['暫無未讀消息']
			}, 
			color: {
				type: String,
				default: '#de8c17'
			},
			bgColor: {
				type: String,
				default: '#fffbe8'
			},
			switchTime: {
				type: Number,
				default: 3
			},
		}
	}
</script>

<style>
	.swiper{
		height: 60upx!important;
	}
	.notice-box{
		width: 100%; 
		height: 60upx; 
		padding: 0 10upx; 
		overflow: hidden; 
		margin: 20upx 0; 
		display: flex; 
		justify-content: flex-start;
	}
	.notice-icon{
		width: 60upx; 
		height: 60upx; 
		line-height: 50upx; 
		text-align: center; 
		position: relative;
	}
	.notice-content{
		width: calc(100% - 220upx); 
		position: relative; 
		font-size: 14px;
	}
	.notice-content-item{
		width: 100%; 
		height: 60upx; 
		text-align: left; 
		line-height: 60upx;
	}
	.notice-content-item-text{
		display: block; 
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	
	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>