组件使用:
<NoticeBar :list="notice"></NoticeBar>
组件源码:
<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>