uniapp+vue3——通知栏标题纵向滚动切换

耶啵奶膘2025-07-27 12:07

介绍

取巧，使用纵向轮播实现

html 复制代码

<!-- 通知栏 -->
<view class="noticeBox" v-if="notice.length>0">
	<image src="/static/images/index/noticeIcon.png" mode="aspectFill"></image>
	<swiper class="noticeSwiper" vertical circular autoplay>
		<swiper-item v-for="(item,index) in notice" :key="index">
			<view class="noticeTxt">{{item.title}}</view>
		</swiper-item>
	</swiper>
</view>

javascript 复制代码

const notice = ref([])
onLoad((options) => {
	getIndexNotice()
})
//公告
const getIndexNotice = () => {
	api.getIndexNotice().then(res => {
		if (res.code == 1) {
			notice.value = res.data
		}
	})
}

css 复制代码

.noticeBox {
	height: 72rpx;
	background-color: #ffffff;
	border-radius: 40rpx;
	margin-top: 24rpx;
	color: var(--fui-color-txt);
	font-size: 26rpx;
	display: flex;
	align-items: center;
	padding: 0 28rpx;

	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.noticeSwiper {
		width: 100%;
		height: 100%;

		.noticeTxt {
			width: 100%;
			height: 100%;
			line-height: 72rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}