当前位置: 首页 > news >正文

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

相关文章:

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

效果图&#xff1a; <template><view class"notice" click"policyInformation"><view class"notice-icon"><image mode"aspectFit" class"img" src"/static/img/megaphone.png"></i…...

OSPF在MGRE上的实验

实验题目如下&#xff1a; 实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】R6为ISP只能配置ip地址&#xff0c;R1-5的环回为私有网段 【2】R1/4/5为全连的MGRE结构&#xff0c;R1/2/3为星型的拓扑结构&#xff0c;R1为中心站点 【3】所有私有网段可以互相通讯&…...

什么样的跨网文件安全交换系统 可实现安全便捷的文件摆渡?

进入互联网时代&#xff0c;网络的运算和数据管理能力助力各个行业高速发展&#xff0c;但同样带来了一些网络安全隐患&#xff0c;网络攻击、数据窃取、敏感信息泄露等问题。为此&#xff0c;我国出台了系列政策来全面提升银各行业系统网络安全整体防护水平&#xff0c;其中“…...

C语言memset函数的作用

memset函数是C语言中的一个库函数&#xff0c;其作用是将一块内存区域的每个字节都设置为指定的值。 memset函数的原型如下&#xff1a; void *memset(void *ptr, int value, size_t num); 参数解释&#xff1a; ptr&#xff1a;指向要填充的内存区域的指针。value&#xff1…...

暑假刷题第23天--8/7

D-游游的k-好数组_牛客周赛 Round 6 (nowcoder.com)&#xff08;关键--a[1]a[k1]&#xff09; #include<iostream> #include<algorithm> using namespace std; const int N100005; int a[N]; typedef pair<int,int>PII; PII b[N]; void solve(){int n,k,x;…...

Double DQN缓解动作价值的高估问题

1、算法&#xff1a; Selection using DQN&#xff1a; a ⋆ argmax ⁡ a Q ( s t 1 , a ; w ) . a^{\star}\operatorname*{argmax}_{a}Q(s_{t1},a;\mathbf{w}). a⋆aargmax​Q(st1​,a;w). Evaluation using target network: y t r t γ ⋅ Q ( s t 1 , a ⋆ ; w − )…...

【C#学习笔记】内存管理

文章目录 分配内存释放内存GC标记清除算法分代算法大对象和小对象 .NET的GC机制有这样两个问题&#xff1a; 官方文档 自动内存管理 自动内存管理是CLR在托管执行过程中提供的服务之一。 公共语言运行时的垃圾回收器为应用程序管理内存的分配和释放。 对开发人员而言&#xf…...

面试之快速学习c++11- 列表初始化和 lambda匿名函数的定义

学习地址&#xff1a; http://c.biancheng.net/view/3730.html 8. C11列表初始化&#xff08;统一了初始化方式&#xff09; 我们知道&#xff0c;在 C98/03 中的对象初始化方法有很多种&#xff0c;请看下面的代码&#xff1a; //初始化列表 int i_arr[3] { 1, 2, 3 }; /…...

CI/CD—Docker初入门学习

1 docker 了解 1 Docker 简介 Docker 是基于 Go 语言的开源应用容器虚拟化技术。Docker的主要目标是build、ship and run any app&#xff0c;anywhere&#xff0c;即通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;达到应用组件级别的一次封装、到处运…...

多线程的创建,复习匿名内部类,Thread的一些方法,以及lambda的变量捕捉,join用法

一、&#x1f49b; Java的Thread类表示线程 1.创建类&#xff0c;继承Thread重写run方法 2.创建类&#xff0c;实现Runnable重写run方法 3.可以继承Thread重写run基于匿名内部类 4.实现Runnable重写run基于匿名内部类 5.lamdba表达式表示run方法的内容&#xff08;推荐&#x…...

瑞吉外卖系统05

哈喽&#xff01;大家好&#xff0c;我是旷世奇才李先生 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】更有我为大家准备的福利哟&#xff0c;回复【项目】获取我为大家准备的项目 最近打算把我手里之前做的项目分享给大家&#…...

D455+VINS-Fusion+surfelmapping 稠密建图(三)

继续&#xff0c;由surfelmapping建立的点云生成octomap八叉树栅格地图 一、安装OctomapServer 建图包 安装插件 sudo apt-get install ros-melodic-octomap-ros sudo apt-get install ros-melodic-octomap-msgs sudo apt-get install ros-melodic-octomap-server sudo apt-…...

rv1109/1126 rknn 模型部署过程

rv1109/1126是瑞芯微出的嵌入式AI芯片&#xff0c;带有npu, 可以用于嵌入式人工智能应用。算法工程师训练出的算法要部署到芯片上&#xff0c;需要经过模型转换和量化&#xff0c;下面记录一下整个过程。 量化环境 模型量化需要安装rk的工具包&#xff1a; rockchip-linux/rk…...

Android平台一对一音视频通话方案对比:WebRTC VS RTMP VS RTSP

一对一音视频通话使用场景 一对一音视频通话都需要稳定、清晰和流畅&#xff0c;以确保良好的用户体验&#xff0c;常用的使用场景如下&#xff1a; 社交应用&#xff1a;社交应用是一种常见的使用场景&#xff0c;用户可以通过音视频通话进行面对面的交流&#xff1b;在线教…...

--binlog-row-event-max-size

--binlog-row-event-max-size MySQL中用于控制rows格式的Binlog&#xff0c;binlog以chunk的方式存储&#xff0c;每个chunk的大小由binlog-row-event-max-size 进行控制&#xff1b; 如果event比较大的时候可以调大这个值&#xff1b;&#xff1b;改值必须是256的倍数&#…...

Jmeter命令行运行实例讲解

1. 简介 使用非 GUI 模式&#xff0c;即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资 本文介绍windows下以命令行模式运行的方法。 1.1. 命令介绍 jmeter -n -t <testplan filename> -l <listener filename> 示例&#xff1a; jmeter -n -t test…...

pl/sql函数如何返回多行数据?在线等......

​编辑csm8109022010-01-27 09:59:18 这个问题我以前问过类似的&#xff0c;但一直没得到如意的答案&#xff01;在oracle 里soctt的用户下的emp表&#xff0c;比如写一个函数&#xff0c;传入的参数为部门编号&#xff0c;然后返回所有该部门人员信息的函数。要用到游标&…...

Ubuntu Find命令详解

一、Find命令简介 Ubuntu的Find命令是一种常用的终端指令&#xff0c;用于在文件系统中查找符合条件的文件和目录。该命令的语法格式如下&#xff1a; find [PATH] [OPTION] [EXPRESSION]其中&#xff0c;PATH表示待查找的目录&#xff0c;OPTION为选项参数&#xff0c;EXPRES…...

ADS Momentum学习笔记

ADS Momentum的简介 ADS Layout界面仿真采用的方法主要是Momentum&#xff08;矩量法&#xff09;。 Momentum的特点 Momentum是高级设计系统&#xff08;ADS&#xff09;的重要组成部分&#xff0c;它提供了设计现代通信系统的电磁仿真。它可以用来计算一般平面电路的S参数…...

解决Vue3 使用Element-Plus导航刷新active高亮消失

解决Vue3 使用Element-Plus导航刷新后active高亮消失的问题 启用路由模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 接下来打印一下选中项index和index路径&#xff0c; 刷新也是没有任何问题的&#xff0c;active不会消失…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...