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]>
相关推荐
ALLSectorSorft1 小时前
上门服务小程序会员系统框架设计
小程序·apache
anyup2 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
甜甜的资料库4 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
说私域9 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
人工智能·小程序·开源·零售
alphaair9 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran575311 小时前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem19 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
Uyker20 小时前
微信小程序动态效果实战指南:从悬浮云朵到丝滑列表加载
前端·微信小程序·小程序
happyCoder1 天前
uniapp 微信小程序实现定时消息订阅提醒(前后端)
微信小程序
Bug从此不上门1 天前
【无标题】
前端·javascript·uni-app·vue