uniapp 微信小程序 上下滚动的公告通知(只取前3条)

效果图:

bash 复制代码
<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>
bash 复制代码
data() {
	return {
		noticeBarList: [],	
	}
}
bash 复制代码
onLoad: function(options) {
	this.getNotice()
},
bash 复制代码
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
		})
	},
}
bash 复制代码
<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]>
相关推荐
假客套2 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游
邹荣乐2 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
xw53 小时前
支付宝小程序外链跳转调试爬坑
uni-app·支付宝
^Rocky3 小时前
uniapp 对接腾讯云IM群组成员管理(增删改查)
uni-app·腾讯云
假客套4 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游
程序员小张丶5 小时前
基于UniApp开发HarmonyOS 5.0鸿蒙汽车应用的指南
uni-app·汽车·harmonyos5.0
weixin_177297220695 小时前
盲盒一番赏小程序:引领盲盒新潮流
小程序
moxiaoran57535 小时前
uni-app学习笔记二十四--showLoading和showModal的用法
笔记·学习·uni-app
HHHHHY6 小时前
使用webview外链打包apk,写入自签CA证书流程,解决app录音功能无法使用
前端·uni-app
海天胜景10 小时前
uniapp 字符包含的相关方法
uni-app