fs-uni-template/components/fs-notice-bar/fs-notice-bar.vue

<template>
	<view class="fs-notice-bar" :animation="animationData" :style="{ backgroundColor: bgColor, color }" v-if="visible">
		<fs-icon v-if="showIcon" class="fs-notice-bar-notice" type="icon-sound" :color="color"></fs-icon>
		<swiper class="fs-notice-bar-swiper" autoplay circular :vertical="vertical" :interval="interval" :duration="1000">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="fs-notice-bar-item line1" @click="handleRoute(item)">{{ item[titleKey] }}</view>
			</swiper-item>
		</swiper>
		<fs-icon
			v-if="showClose"
			class="fs-notice-bar-close"
			:color="color"
			type="icon-close-circle"
			@click="handleClose"
		></fs-icon>
	</view>
</template>

<script>
/**
 * 通告栏组件
 * @description 通告栏组件
 * @property {Array} list 通告栏列表
 * @property {String} titleKey 展示标题的key
 * @property {String} urlKey 跳转路径的key
 * @property {String} bgColor 背景色
 * @property {String} color 文字颜色
 * @property {Number} vertical 是否垂直滚动
 * @property {String} interval 滚动间隔
 * @property {Boolean} showClose 是否显示关闭按钮
 * @property {Boolean} showIcon 是否显示通知icon
 * @property {String} linkType  跳转类型
 */
export default {
	name: 'fs-notice-bar'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	list: {
		type: Array,
		default() {
			return []
		}
	},
	titleKey: {
		type: String,
		default: 'title'
	},
	urlKey: {
		type: String,
		default: 'url'
	},
	bgColor: {
		type: String,
		default: '#fffbe8'
	},
	color: {
		type: String,
		default: '#de8c17'
	},
	vertical: Boolean,
	interval: {
		type: Number,
		default: 5000
	},
	showClose: {
		type: Boolean,
		default: true
	},
	showIcon: {
		type: Boolean,
		default: true
	},
	linkType: {
		type: String,
		default: 'navigateTo'
	}
})
const emits = defineEmits(['click'])

let visible = ref(true)
let animationData = ref(null)
const animation = uni.createAnimation({
	duration: 200
})

const handleClose = () => {
	animation
		.scale(0.7, 0.7)
		.opacity(0)
		.step()
	animationData.value = animation.export()

	setTimeout(() => {
		visible.value = false
	}, 200)
}

const handleRoute = item => {
	if (item[urlKey]) {
		uni[props.linkType]({
			url: item[urlKey]
		})
	}
	emits('click')
}
</script>

<style lang="scss" scoped>
.fs-notice-bar {
	margin: 0 var(--gutter);
	position: relative;
	display: flex;
	align-items: center;

	&-notice {
		margin-left: var(--gutter);
	}

	&-swiper {
		height: 80rpx;
		flex: 1;
	}
	&-item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 var(--gutter);
	}

	&-close {
		margin-right: var(--gutter);
	}
}
</style>