jje_uniapp/components/scroll-notice/ScrollNotice.vue

<template>
	<view class="notice-main">
		<view class="notice-icon">
			<image src="/static/index/u01.png" mode=""></image>
		</view>
		<view class="notice-swiper-wrap">
			<swiper class="notice-swiper" :style="'height:'+height+'px;line-height:'+height+'px;'" autoplay="true"
				:interval="interval" duration="500" circular="true" :vertical="type==1?true:false">
				<swiper-item v-for="(list,index) in dataList" :key="index" @click.stop="clickList(list)">
					<view class="notice-swiper-item" :style="'font-size:'+fontSize+'px;color:'+color">
						{{list.noticeTitle}}
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//通知列表
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//滚动类型(1:向上循环滚动;2:横向滚动)
			type: {
				type: Number,
				default: 1
			},
			//滚动时间间隔
			interval: {
				type: Number,
				default: 1000
			},
			//通告栏高度(rpx)
			height: {
				type: Number,
				default: 66
			},
			//字体大小(rpx)
			fontSize: {
				type: Number,
				default: 30
			},
			//字体颜色
			color: {
				type: String,
				default: '#333333'
			},
			//自定义取值名字
			customName: {
				type: String,
				default: 'title'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			clickList(item) {
				this.$emit("click", item)
			}
		}
	}
</script>

<style scoped>
.notice-main {
	z-index: 100;
	width: 100%;
	display: flex;
	align-items: center;
}

.notice-icon{
	width: 8%;
}
.notice-icon image{
	height: 16px;
	width: 16px;
}
.notice-swiper-wrap{
	width: 90%;
}
.notice-swiper-item {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
</style>