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

效果图:
在这里插入图片描述

<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]>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/81759.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

具有吸引子的非线性系统(MatlabSimulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

BIO,NIO,AIO总结

文章目录 1. BIO (Blocking I/O)1.1 传统 BIO1.2 伪异步 IO1.3 代码示例 1.4 总结2. NIO (New I/O)2.1 NIO 简介2.2 NIO的特性/NIO与IO区别1)Non-blocking IO&#xff08;非阻塞IO&#xff09;2)Buffer(缓冲区)3)Channel (通道)4)Selector (选择器) 2.3 NIO 读数据和写数据方式…

刚刚更新win11,记事本消失怎么处理?你需要注意些什么?

记录window11的bug hello&#xff0c;我是小索奇 昨天索奇从window10更新到了window11&#xff0c;由于版本不兼容卸载了虚拟机&#xff0c;这是第一个令脑壳大的&#xff0c;算了&#xff0c;还是更新吧&#xff0c;了解了解win11的生态&#xff0c;后期重新装虚拟机 第一个可…

TCP三次握手四次断开

一、了解TCP &#x1f345;TCP &#xff1a;传输控制协议&#xff0c;是一种面向连接的可靠的传输协议。 什么是可靠的传输协议&#xff1f;如何保障可靠传输&#xff1f; 保证可靠性&#xff1a; 1.确认机制 2.重传输机制什么是面向连接&#xff1f;如何保障面…

教雅川学缠论07-中枢实战众泰汽车000980

本文实战众泰汽车 下面是2023年11月14-2023年8月8众泰汽车日K图 先画日K 接下来处理包含&#xff0c;就变成下面这个样子 下面在套上缠论的理论&#xff0c;未来股价的走势应该是红色椭圆形虚线里面的样子 好了&#xff0c;文章就到这里&#xff0c;如果众泰最终不是这个走势…

人工智能与物理学(软体机器人能量角度)的结合思考

前言 好久没有更新我的CSDN博客了&#xff0c;细细数下来已经有了16个月。在本科时期我主要研究嵌入式&#xff0c;研究生阶段对人工智能感兴趣&#xff0c;看了一些这方面的论文和视频&#xff0c;因此用博客记录了一下&#xff0c;后来因为要搞自己的研究方向&#xff0c;就…

Maven入职学习

一、什么是Maven&#xff1f; 概念&#xff1a; Maven是一种框架。它可以用作依赖管理工具、构建工具。 它可以管理jar包的规模、jar包的来源、jar包之间的依赖关系。 它的用途就是管理规模庞大的jar包&#xff0c;脱离IDE环境执行构建操作。 具体使用&#xff1a; 工作机…

【MATLAB第67期】# 源码分享 | 基于MATLAB的morris全局敏感性分析

【MATLAB第67期】# 源码分享 | 基于MATLAB的morris全局敏感性分析 一、代码展示 clear all npoint100;%在分位数超空间中要采样的点数(计算次数iternpoint*(nfac1) nfac20;%研究函数的不确定因素数量 [mu, order] morris_sa1((x)test_function(x), nfac, npoint)for t1:size…

IELTS图表类作文基础知识

表格可以用table或chart来表示。 其实&#xff0c;数据类图表除了可以用chart表示&#xff0c;也可以用其他单词。 表格又可以称为table。而带有几何图形的图表可以用graph来表示。 像饼状图、折线图、柱状图这样用几何图形&#xff0c;或者直接用表格来呈现数据的形式&#x…

【Linux升级之路】5_基础IO

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux升级之路】 ✒️✒️本篇内容&#xff1a;文件操作&#xff0c;文件管理&#xff0c;重定向&#xff0c;简易shell添加重定向功能&#xff0c;文件属…

如何在风控引擎中快速增加策略

风控策略是由规则和模型组成的、用以实现风险控制目标的集合。模型与规则相辅相成&#xff0c;相互补充&#xff0c;在不同的业务阶段彼此的侧重点不同。新业务上线期&#xff0c;数据量不足&#xff0c;策略以规则为主&#xff1b;当业务运行一段时候后&#xff0c;数据有了一…

【JavaEE进阶】Spring创建与使用

文章目录 一. 创建 Spring 项目1.1 创建一个Maven项目1.2 添加Spring依赖1.4. 创建一个启动类 二. 将 Bean 对象存放至 Spring 容器中三. 从 Spring 容器中读取到 Bean1. 得到Spring对象2. 通过Spring 对象getBean方法获取到 Bean对象【DI操作】 一. 创建 Spring 项目 接下来使…

如果你需要使用重试机制,请使用Spring官方的Spring Retry

Spring Retry 是 Spring Framework 中的一个模块&#xff0c;提供了一种简单的方式来在应用程序中实现重试机制。 在应用程序中&#xff0c;如果遇到了一些不可避免的错误&#xff0c;比如网络连接失败、数据库连接失败等&#xff0c;我们通常需要对这些错误进行重试&#xff…

excel 方框内打钩符号

大写字母 R &#xff0c;字体选择 Wingdings 2

[mongo]应用场景及选型

应用场景及选型 MongoDB 数据库定位 OLTP 数据库横向扩展能力&#xff0c;数据量或并发量增加时候架构可以自动扩展灵活模型&#xff0c;适合迭代开发&#xff0c;数据模型多变场景JSON 数据结构&#xff0c;适合微服务/REST API基于功能选择 MongoDB 关系型数据库迁移 从基…

电脑怎么查看连接过的WIFI密码(测试环境win11,win10也能用)

电脑怎么查看连接过的WIFI密码 方法一&#xff1a;适用于正在连接的WIFI密码的查看 打开设置 点击“网络和Internet”&#xff0c;在下面找到“高级网络设置”点进去 在下面找到 “更多网络适配器选项” 点进去 找到 WLAN &#xff0c;然后双击它 5.然后点击“无线属性” 6.…

MongoDB数据库操作及操作命令

目录 一、基础概念 二、安装mongod 三、命令交互数据库 &#xff08;1&#xff09;数据库命令 &#xff08;2&#xff09;集合命令 &#xff08;3&#xff09;文档命令 四、Mongoose &#xff08;1&#xff09;增加一条数据 &#xff08;2&#xff09;插入多个数据 &am…

MinIO:微服务中上传图片流程

1、在nacos中配置minio参数 2、controller层 package com.heima.wemedia.controller.v1;import com.heima.model.common.dtos.ResponseResult; import com.heima.wemedia.service.WmMaterialService; import org.springframework.beans.factory.annotation.Autowired; import …

Linux项目部署

目录 一JAVAWeb环境的部署【安装JDK&#xff0c;MySQL数据库&#xff0c;Tomcat】 二.手工部署SpringBoot项目&#xff08;写的最好的&#xff09; 1.在IDEA中开发SpringBoot项目并打成jar包--点击右侧的Maven执行package命令 2.将jar包上传到Linux服务器 3.执行以下命令&a…

vcode开发go

配置环境变量 go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct 创建文件夹 mkdir hello cd hello go mod help go mod help 初始化一个项目 go mod init hello 获取第三方包 go get github.com/shopspring/decimal 将依赖包下载到本地 go mod …