uniapp 微信小程序上下滚动的公告通知（只取前3条）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序上下滚动的公告通知（只取前3条）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：
uniapp 微信小程序上下滚动的公告通知（只取前3条）,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/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);
	},
	//进入公告通知详情页
	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]>