dati/components/an-notice-bar/an-notice-bar.vue

<template>
	<view>
		<view class="an-notice-box">
			<view class="an-notice-l">
				<view class="iconfont icon-tongzhi"></view>
			</view>
			<scroll-view class="an-notice-content">
				<swiper v-if="show" class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500"
					:circular="true" :vertical="true">
					<swiper-item v-for="(item, index) in list" :key="index" class="an-notice-content-item">
						<view class="swiper-item">
							<view class="an-notice-content-item-text" :style="'color: '+color+';'">
								<view style="width: 85%;" @tap="gotoDetail(item)">{{item.title}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
			<view class="an-notice-more" @tap="$openrul('/pages/article/notice')">
				<view class="iconfont icon-arrow" style="font-size: 12px;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcons
		},
		props: {
			message_list: {},
			color: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: this.message_list,
				copyText: '',
				show: '',
			};
		},
		mounted() {
			this.show = true;
		},
		watch: {
			message_list() {
				this.list = this.message_list
			}
		},
		methods: {
			more() {
				this.show = false;
				this.$emit('more')
			},
			gotoDetail(item) {
				if (item.url == '') {
					uni.navigateTo({
						url: '/pages/article/detail?id=' + item.id + '&type=2'
					})
				} else {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + item.url + '&title=' + item.title
					})
				}
			},
		}
	}
</script>

<style>
	.swiper {
		height: 100%;
	}

	.an-notice-box {
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}

	.an-notice-box .an-notice-l {
		display: flex;
		align-items: center;
	}

	.an-notice-box .icon-tongzhi {
		color: #ffc001;
		font-size: 16px;
	}

	.an-notice-box .an-notice-l-title {
		font-size: 17px;
		color: #fdd100;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 2px;
	}

	.an-notice-icon {
		width: 60upx;
		height: 60upx;
		line-height: 50upx;
		text-align: center;
		position: relative;
	}

	.an-notice-content {
		width: calc(100% - 220upx);
		position: relative;
		font-size: 15px;
		padding-left: 6px;
		flex: 1;
	}

	.an-notice-content-item {
		width: 100%;
		text-align: left;
	}

	.an-notice-content-item-text {
		width: 96%;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 15px;
	}

	.an-notice-more {
		font-size: 13px;
		/* color: #b7b7b7; */
		text-align: center;
		display: flex;
		align-items: center;
	}

	.an-notice-more-l {
		text-decoration: underline;
		margin-right: 3px;
	}

	@keyframes anotice {
		0% {
			transform: translateY(100%);
		}

		30% {
			transform: translateY(0);
		}

		70% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}
</style>