community-front/pages/components/index/VolunteerHeader.vue

<template>
	<view class="volunteer-header">
		<view class="swiper-container" >
			<uv-swiper :list="bannerList" indicator  indicatorMode="dot" height="270rpx" circular></uv-swiper>
			<!-- <view class="header-title">
				<text class="title-text">国际志愿者日</text>
				<text class="date-text">12/05</text>
			</view> -->
			<!-- <image class="dove-icon" src="/static/路径 6665@2x.png" mode="aspectFit"></image> -->
		</view>
		<view class="notice-bar" @click="goToAnnouncement">
			<image class="horn-icon" src="/static/首页_小喇叭.png" mode="aspectFit"></image>
			<view class="notice-scroll-container">
				<view class="notice-scroll" :animation="animationData">
					<text class="notice-text" v-for="(notice, index) in noticeList" :key="index">
						{{ notice.title }}
					</text>

				</view>
			</view>
			<uv-icon name="arrow-right" color="#999" size="14"></uv-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VolunteerHeader',
		data() {
			return {
				bannerList: [
							'/static/bannerImage.png',
					'/static/bannerImage.png',
					'/static/bannerImage.png',
				],
				noticeList: [
					{ id: 1, title: '【重要通知】志愿者服务活动报名开始啦，欢迎大家踊跃参与！' },
					{ id: 2, title: '【活动预告】本周六将举办环保志愿活动，期待您的参与' },
					{ id: 3, title: '【表彰通知】优秀志愿者表彰大会将于下周举行' },
					{ id: 4, title: '【温馨提醒】请各位志愿者及时更新个人信息' }
				],
				animationData: {},
				currentIndex: 0,
				scrollTimer: null
			}
		},
		methods: {
			goToAnnouncement() {
				// 跳转到公告页面
				uni.navigateTo({
					url: '/subPages/index/announcement'
				})
			},
			async queryBannerList() {
				const res = await this.$api.home.queryBannerList()	
				this.bannerList = res.result.records.map(item => item.image)
			},
			// 获取公告列表
			async queryNoticeList() {
				const res = await this.$api.home.queryNoticeList({
					pageNo: 1,
					pageSize: 4,
				})	
				this.noticeList = res.result.records
			},
			// 开始滚动动画
			startScroll() {
				this.scrollTimer = setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.noticeList.length
					const animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease-in-out'
					})
					animation.translateY(-this.currentIndex * 30).step()
					this.animationData = animation.export()
				}, 2000)
			},
			// 停止滚动动画
			stopScroll() {
				if (this.scrollTimer) {
					clearInterval(this.scrollTimer)
					this.scrollTimer = null
				}
			}
		},
		async mounted()  {
			console.log('出发喽');
			await this.queryBannerList()
			await this.queryNoticeList()
			// 启动公告滚动
			this.startScroll()
		},
		beforeDestroy() {
			// 清理定时器
			this.stopScroll()
		},
	}
</script>

<style lang="scss" scoped>
.volunteer-header {
	width: 100%;
	
	.swiper-container {
		position: relative;
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		
		.header-title {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			z-index: 10;
			display: flex;
			flex-direction: column;
			background-color: rgba(0,0,0,0.4);
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			
			.title-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
			}
			
			.date-text {
				font-size: 28rpx;
				color: #2c5e2e;
				margin-top: 6rpx;
			}
		}
		
		.dove-icon {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			z-index: 10;
			width: 70rpx;
			height: 70rpx;
			background-color: #fff;
			border-radius: 50%;
			padding: 10rpx;
		}
	}
	
	.notice-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		// 如何只显示底部阴影

		box-shadow: 0rpx 1rpx 0rpx 0rpx #3a94e1; ;
		// border-bottom: 1rpx solid #3A94E1;
		.horn-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		
		.notice-scroll-container {
			flex: 1;
			height: 60rpx;
			overflow: hidden;
			position: relative;
		}
		
		.notice-scroll {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		
		.notice-text {
			display: block;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: $uni-text-color;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
</style>