封装原因和效果

• 使用UI组件库的滚动通知组件，无法自定义左右两侧的图标

例如上图的案例，就是滚动通知的喇叭图标UI不满意，不想使用普通的喇叭图标，要使用自己设计的图标，这时候用UI组件库的滚动通知组件就无法满足需求了

• 可以指定滚动方向 横向/纵向
• 可以指定滚动时间

主要思路就是靠动画滚动和swiper组件实现

横向滚动使用的是动画滚动

纵向滚动使用的是swiper组件

<template>
	<view class="notice-bar">
		<u-icon name="volume-fill" color="#232D37" size="28"></u-icon>
		<div class="text-box" v-if="props.type == 1" @click="clickNotice(props.noticeObject)">
			<text class="scroll-text" :style="{ 'animation-duration': `${props.speed}s` }">{{
				props.noticeObject.text
			}}</text>
		</div>
		<swiper circular vertical autoplay :interval="props.speed * 1000" v-else>
			<swiper-item
				v-for="(item, index) in props.noticeList"
				:key="index"
				@click="clickNotice(item)"
			>
				{{ item.title }}
			</swiper-item>
		</swiper>
		<u-icon name="arrow-right" color="#232D37" size="28" @click="clickMore"></u-icon>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed, watchEffect, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const { proxy } = getCurrentInstance();
	const example = proxy;
	const props = defineProps({
		// 滚动类型 1 横向滚动 2 纵向滚动
		type: {
			type: String,
			default: '1',
		},
		// 横向滚动 传递一个对象
		noticeObject: {
			type: Object,
		},
		// 纵向滚动 传递一个数组
		noticeList: {
			type: Array,
		},
		// 滚动速度 单位 s
		speed: {
			type: Number,
			default: 3,
		},
	});
	const emit = defineEmits(['clickNotice', 'clickMore']);
	// 点击通知
	function clickNotice(data) {
		emit('clickNotice', data);
	}
	// 点击右侧图标
	function clickMore() {
		emit('clickMore');
	}
</script>

<style lang="scss" scoped>
	.notice-bar {
		background: #d7fcff;
		border-radius: 10rpx;
		padding: 0 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// 设置通知内容文字样式
		font-size: 24rpx;
		font-weight: 400;
		color: #2d99a1;
		.text-box,
		swiper {
			margin: 0 10rpx;
			flex: 1;
			height: 81rpx;
			line-height: 81rpx;
		}
		// 定义滚动动画
		@keyframes scrollText {
			0% {
				transform: translateX(100%);
			}
			100% {
				transform: translateX(-100%);
			}
		}
		.text-box {
			overflow: hidden;
			.scroll-text {
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				animation: scrollText linear infinite;
			}
		}
	}
</style>

• 滚动模式只可以选一种，所以noticeObject或noticeList只需要传其中一个即可
• 样式可以根据项目需要更改
• 通知数据也可以根据项目返回的数据进行更换（比如，页面中的title、text属性可以根据真实数据的属性进行更换）
• 为什么横向滚动要使用对象不直接使用字符串？因为大部分业务中都会存在点击公告内容跳转到公告详情页的需求，这时候后端返回的数据大概率会是一个对象（里面有公告内容和公告id）

页面使用

<my-notice
			type="1"
			:speed="5"
			:noticeObject="noticeObject"
			:noticeList="noticeList"
			@clickNotice="clickNotice"
			@clickMore="clickMore"
		></my-notice>
let noticeObject = ref({
		id: 1,
		text: '今天打我啊我的骄傲我已经的阿珂加忘掉爱我的那屋',
	});
	let noticeList = ref([
		{
			title: '今天打我啊我的骄傲我已经的',
		},
		{
			title: '哇带我今年啊我下午',
		},
		{
			title: '阿瓦隆看到我的送DAU',
		},
	]);
	// 点击公告
	function clickNotice(data) {
		console.log(data);
	}
	// 点击右侧图标
	function clickMore() {
		console.log('点击更多');
	}