效果圖：
文章來源地址http://www.zghlxwxcb.cn/news/detail-632771.html

<template>
	<view class="notice" @click="policyInformation">
		<view class="notice-icon">
			<image mode="aspectFit" class="img" src="@/static/img/megaphone.png"></image>
		</view>
		<view class="notice-content">
			<swiper circular :autoplay="true" :vertical="true">
				<swiper-item class="flex justify-content-between" v-for="(item, index) in noticeBarList"
					:key="index" @click="toNotice(item)">
					<text class="text text-ellipsis flex-grow">{{ item.mtitle }}</text>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice-arrow">
			<image mode="aspectFit" class="img" src="@/static/img/supervisoryEnd/arrow.png"></image>
		</view>
	</view>
</template>

data() {
	return {
		noticeBarList: [],	
	}
}

onLoad: function(options) {
	this.getNotice()
},

methods: {
	//查詢通知公告
	getNotice(){
		uni.showLoading();
		var params = {
			url: "/transporterList",
			method: "GET",
			data: {
				readStatus:-1
			},
			callBack: res => {
				uni.hideLoading()
				if(res.rows.length > 3){
					//最多只顯示前三個通知
					this.noticeBarList = res.rows.slice(0,3);
				}else{								
					this.noticeBarList = res.rows;
				}
			}
		};
		http.request(params);
	},
	//進(jìn)入公告通知詳情頁
	toNotice(item){
		uni.navigateTo({
			url:"/pages/notice-detail/notice-detail?messageId="+item.messageId
		})
	},
}

<style lang="scss" scoped>
.notice {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
	background: rgba(255, 255, 255, 0.8);
	margin-top: 20rpx;
	border-radius: 10rpx;

	.notice-icon {
		.img {
			display: block;
			width: 30rpx;
			height: 30rpx;
			margin-left: 15rpx;
		}
	}

	.notice-content {
		flex-grow: 1;

		swiper {
			height: 56rpx;
			padding: 0 17rpx;

			swiper-item {
				display: flex;
				display: -webkit-flex;
				align-items: center;
				justify-content: space-between;

				.text {
					height: 56rpx;
					font-size: 26rpx;
					color: #666666;
					line-height: 56rpx;
					flex-grow: 1;
				}
			}
		}
	}

	.notice-arrow {
		.img {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
}
</style]>

到了這里，關(guān)于uniapp 微信小程序 上下滾動的公告通知（只取前3條）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！