template-project/components/notices/notice-one/notice-one.vue

<template>
	<view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}">
		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound" :color="getColor(theme)" size="22" />
		<swiper class="notice_center" vertical v-if="direction=='column'" :autoplay="true" :interval="4000" :duration="500" :circular="true" disable-touch>
			<swiper-item v-for="(item, index) in list" :key="index" class="swiperIn" @click="goItem(item)">
				<view>{{item[theKey]}}</view>
			</swiper-item>
		</swiper>
		<view :class="['','notice_center1','notice_center2','notice_center3','notice_center4','notice_center5'][speedTime]" v-else><view class="content">{{list[0][theKey]}}</view></view>
		<view class="notice_right" v-if="showMore">
			<view @click="goMore">更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"notice-one",
		props:{
			// 速度
			speed: {
				type:Number,
				default:1
			},
			//主题色,default|primary|error|warning|success|info
			theme: {
				type: String,
				default: 'default'
			},
			// 是否显示左侧icon
			showIcon: {
				type: [Boolean, String],
				default: false
			},
			// 是否显示更多
			showMore: {
				type: [Boolean, String],
				default: false
			},
			list: {
				type: Array,
				default() {
					return [{id:1,title:'公告1'},{id:2,title:'公告2'}]
				}
			},
			//公告数组的键名
			theKey:{
				type: String,
				default: 'title'
			},
			//方向，column垂直，row水平时取第一条公告
			direction:{
				type: String,
				default: 'column'
			}
		},
		data() {
			return {
				text:'',
				speedTime:1
			};
		},
		mounted() {
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.content').boundingClientRect((rect) => {
				console.log(rect.width);
				let newWidth = rect.width;
				if(newWidth <=420) {
					this.speedTime = 1;
				}
				if(newWidth >= 420 && newWidth < 720) {
					this.speedTime = 2;
				}
				if(newWidth >= 720 && newWidth < 820) {
					this.speedTime = 3;
				}
				if(newWidth >= 820 && newWidth < 920) {
					this.speedTime = 4;
				}
				if(newWidth >= 920) {
					this.speedTime = 5;
				}
			}).exec()
		},
		methods:{
			getColor(theme){
				if(theme=="primary"){
					return "#2979FF"
				}else if(theme=="error"){
					return "#FA3534"
				}else if(theme=="warning"){
					return "#FF9A43"
				}else if(theme=="success"){
					return "#1BBF6C"
				}else if(theme=="info"){
					return "#909399"
				}else{
					return "#303133"
				}
			},
			getBgColor(theme){
				if(theme=="primary"){
					return "#ECF5FF"
				}else if(theme=="error"){
					return "#FEF0F0"
				}else if(theme=="warning"){
					return "#FDF6EC"
				}else if(theme=="success"){
					return "#DBF1E1"
				}else if(theme=="info"){
					return "#F4F4F5"
				}else{
					return "#FFFFFF"
				}
			},
			goItem(item){
				uni.navigateTo({
					url:`/pagesB/notice-detail/notice-detail?id=${item.id}`
				})
			},
			goMore(){
				uni.navigateTo({
					url:`/pagesB/notice-list/notice-list`
				})
			}
		}
	}
</script>

<style lang="scss">
	.xzw_notice {
		font-size: 26upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		box-sizing: border-box;
		width: 100%;
		.notice_left{
			margin: 0 20upx 0 0;
		}
		.notice_center{
			flex:1;
			height:90upx;
			.swiperIn{
				height:80upx;
				display: flex;
				align-items: center;
				view{
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
		.notice_center1{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 5s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
		.notice_center1{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 5s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
		.notice_center2{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 10s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
		.notice_center3{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 15s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
		.notice_center4{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 20s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
		.notice_center5{
			flex:1;
			position: relative;
			display: flex;
			align-items: center;
			height:90upx;
			overflow: hidden;
			view{
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;
				animation: notice 25s 0s linear infinite both;
			}
		}
		.notice_right {
			margin: 0 0 0 20upx;
		}
		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
	}
</style>