uniapp实现-审批流程效果

一、实现思路

        需要要定义一个变量, 记录当前激活的步骤。通过数组的长度来循环数据,如果有就采用3元一次进行选择。

        把循环里面的变量【name、status、time】, 全部替换为取出的那一项的值。然后继续下一次循环。

        虚拟的数据都是请求来的, 组装为好渲染的格式。

二、实现步骤

        ①view部分展示

 如果有看不懂的代码,请继续往下看,会有解释!!!

	<view class="container" style="margin: 24rpx 0;"><view class="overbold" style="margin-bottom: 40rpx;">审批</view><template v-for="(item,index) in funList.RenList"><view :key="index" class="flex":style="{ marginBottom: index === funList.RenList.length - 1 ? '24rpx' : '68rpx' }"><view class="img-box"><image class="figure" :src="item.image" mode="aspectFill"></image><view v-if="index != funList.RenList.length - 1" class="line"></view></view><view style="margin-left: 20rpx;"><view class="flex" style="width: 518rpx;"><view class="changwrod" style="margin-bottom: 8rpx;width: 60%;">{{ item.name }}</view><view v-if="item.status == 1" class="smallword" style="color: #999;">{{ item.time }}</view></view><view v-if="item.status == 1" class="smallword" style="color: #31BA3E;">已通过</view><view v-if="item.status == 0" class="smallword" style="color: #666;">待审批</view></view></view></template></view>

代码解释:

代码解释:

 funList.RenList:对象中的数组【考虑到后期交互,也可能单独拿出来】

 :style="{ marginBottom: index === funList.RenList.length - 1 ? '24rpx' : '68rpx' }" 

                这段代码是一个动态的样式绑定,它根据条件来设置元素的 marginBottom 样式属性的值。

具体解释如下:

  • :style 是 Vue/uni-app 中用来动态绑定样式的语法。
  • marginBottom 是 CSS 中的属性,用来设置元素的下边距。
  • index === funList.RenList.length - 1 是一个条件判断表达式,表示如果当前元素的索引(index)等于 funList.RenList 数组的长度减 1。
  • ? '24rpx' : '68rpx' 是一个三元表达式,用于根据条件判断结果设置不同的值。如果条件为真,即当前元素是最后一个元素,那么设置下边距为 '24rpx';否则,设置下边距为 '68rpx'。

        换句话说,这段代码的作用是:如果当前元素是 funList.RenList 数组中的最后一个元素,则设置它的下边距为 '24rpx';否则,设置下边距为 '68rpx'。

        ②JavaScript 内容

               funList: {//。。。。。交互内容RenList: [{image: 'https://cdn.uviewui.com/uview/album/1.jpg',name: "叶玲",time: "2023.12.03 10:30",status: 1 // 1已审核 0未审核}, {image: 'https://cdn.uviewui.com/uview/album/1.jpg',name: "大耳朵",time: "2023.12.03 10:30",status: 0}, {image: 'https://cdn.uviewui.com/uview/album/1.jpg',name: "叶玲",time: "2023.12.03 10:30",status: 1 // 1已审核 0未审核}]},

   

     ③css中样式展示

container{padding: 32rpx;background-color: #fff;border-radius: 16rpx;
}
.overbold {font-weight: bold;color: #1A1A1A;font-family: PingFang SC-Bold;line-height: 48rpx;font-size: 32rpx;
}.img-box {position: relative;.figure {width: 80rpx;height: 80rpx;border-radius: 8rpx;}//中间的间隔线.line {position: absolute;left: 50%;top: 130%;transform: translate(-50%, -50%);width: 6rpx;height: 60rpx;background-color: rgba(102, 102, 102, 0.5);}}

三、效果展示

      

以上就是实现审批流程的具体操作。

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

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

相关文章

linux中对信号的认识

信号的概念与相关知识认识 信号是向目标进程发送消息通知的的一种机制。 信号可以以异步的方式发送给进程&#xff0c;也就是说&#xff0c;进程无需主动等待&#xff0c;而是在任何时间都可以接收到信号。 信号的种类 用kill-l命令查看系统定义的信号列表&#xff1a; 前台…

thinkphp学习11-数据库的查询表达式

比较查询 查询表达式支持大部分常用的 SQL 语句&#xff0c;语法格式如下 where(字段名,查询表达式,查询条件);在查询数据进行筛选时&#xff0c;我们采用 where()方法&#xff0c;比如 id79&#xff1b; $user1 Db::name(user)->where(id, 79)->find(); $user2 Db::…

巧用二进制实现俄罗斯方块小游戏

效果预览 思想 首先建立两个数组board、tetris用来存储当前已经堆积在棋盘的方块与正在下落的方块。 这两个是一维数组当需要在页面画棋盘时就对其每一项转成二进制&#xff08;看计算属性tetrisBoard&#xff09;&#xff0c;其中1&#xff08;红色&#xff09;0&#xff08;…

加密与安全_深入了解Hmac算法(消息认证码)

文章目录 PreHMAC概述常见的Hmac算法Code随机的key的生成 KeyGeneratorHmacMD5用Hmac算法取代原有的自定义的加盐算法 HmacMD5 VS MD5HmacSHA256 Pre 加密与安全_深入了解哈希算法中我们提到&#xff0c; 存储用户的哈希口令时&#xff0c;要加盐存储&#xff0c;目的就在于抵…

现货黄金价格今日行情怎样把握?

由于受到各种经济和政治因素的影响&#xff0c;国际市场上的黄金价格&#xff0c;每天的行情走势都在不断地波动&#xff0c;有时候行情上涨&#xff0c;有时候行情下跌&#xff0c;如果投资者不懂得灵活地应对&#xff0c;在哪一种行情中都有可能亏损&#xff0c;但如果投资者…

Linux系统CPU模式部署Qwen1.5-14B

Qwen1.5已适配Ollama。 Ollama 是一个命令行聊天机器人&#xff0c;它使得几乎可以在任何地方使用大型语言模型变得简单。 下载 Ollma 安装文件 访问以下网站&#xff1a;https://ollama.com/download/linux 执行&#xff1a;curl -fsSL https://ollama.com/install.sh | sh…

信息安全是什么

信息安全&#xff0c;也称为信息安全或数据安全&#xff0c;是防止未经授权的访问、更改、中断和破坏信息。 信息安全本身包括的范围很大&#xff0c;大到国家军事政治等机密安全&#xff0c;小范围的当然还包括如防范商业企业机密泄露&#xff0c;防范青少年对不良信息的浏览…

解决虚拟机启动报错:“End kernel panic - not syncing: attempted to kill the idle task”

原本能正常运行的虚拟机&#xff0c;很长一段时间没用后&#xff0c;今天再次启动&#xff0c;然后就出现下面的问题&#xff1a; 然后走了一些弯路&#xff0c;比如说删除该虚拟机然后新建一个虚拟机&#xff08;问题未解决&#xff09;、直接删除VitualBox重新安装&#xff0…

探索网络世界:IP代理与爬虫技术的全景解析

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

全新攻击面管理平台

首页大屏 内测阶段&#xff0c;免费试用一个月 有兴趣体验的师傅&#xff0c;来长亭云图极速版群里找我 py

0201sherlock(福尔摩斯)-通过名称寻找媒体账号(地址)-github-开源项目学习

文章目录 一 项目简介二 项目安装和演示1 安装2 演示 三 源码分析1 项目结构2 主程序源代码分析 四 添加自定义网址结语 一 项目简介 二 项目安装和演示 1 安装 # clone the repo $ git clone https://github.com/sherlock-project/sherlock.git# change the working direct…

【acwing】前缀与差分

前缀和 题目 输入一个长度为 n的整数序列。 接下来再输入 m个询问&#xff0c;每个询问输入一对 l,r。 对于每个询问&#xff0c;输出原序列中从第 l 个数到第 r 个数的和。 输入格式 第一行包含两个整数 n和 m。 第二行包含 n个整数&#xff0c;表示整数数列。 接下来 …

手把手教你用VMware安装华为存储模拟器

你们好&#xff0c;我的网工朋友。 对于新手来说&#xff0c;很多人因为不清楚虚拟机的操作原理&#xff0c;导致不知道怎么安装创建虚拟机。 群里经常看到有人问虚拟机的相关问题&#xff0c;今天来一篇教你用Vmware虚拟机安装华为存储模拟器&#xff0c;一步步实现简单创建…

通过jenkins进行部署java程序到centos上

1.通过jumpserver访问到centos上&#xff0c;准备下java环境 // step1: 先编辑下 vim /etc/profile// step2: 编写好环境变量 JAVA_HOME/usr/local/java export JAVA_HOME export ZOOKEEPER_HOME/opt/zookeeper/apache-zookeeper-3.7.0-bin PATH$PATH:$JAVA_HOME/bin:$ZOOKEEP…

cgroup——在pod内使用cgroup限制CPU

在Kubernetes中&#xff0c;可以使用Cgroup来限制Pod中的CPU资源使用。具体步骤如下&#xff1a; Pod的定义文件中配置 在Pod的定义文件中&#xff0c;添加资源限制&#xff08;limits&#xff09;和资源请求&#xff08;requests&#xff09;字段。例如&#xff1a; apiVer…

ArrayList集合源码分析

ArrayList集合源码分析 文章目录 ArrayList集合源码分析一、字段分析二、构造方法分析三、方法分析四、总结 内容如有错误或者其他需要注意的知识点&#xff0c;欢迎指正或者探讨补充&#xff0c;共同进步。 一、字段分析 //默认初始化容量。这里和Vector一样&#xff0c;只是…

刷题日记:面试经典 150 题 DAY3

刷题日记&#xff1a;面试经典 150 题 DAY3 274. H 指数238. 除自身以外数组的乘积380. O(1) 时间插入、删除和获取随机元素134. 加油站135. 分发糖果 274. H 指数 原题链接 274. H 指数 重要的是都明白H指数到底是是个啥。注意到如果将引用数从大到小排序&#xff0c;则对于…

windows环境下Grafana+loki+promtail入门级部署日志系统,收集Springboot(Slf4j+logback)项目日志

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

【开发工具】GIF 录屏工具推荐 ( GIF123 - 推荐使用 | GifCam | LICEcap )

文章目录 一、GIF 录屏工具推荐1、GIF123 ( 推荐使用 )2、GifCam3、LICEcap 本博客中介绍的 3 款 GIF 录屏工具下载地址 : https://download.csdn.net/download/han1202012/88905642 也可以到对应的官网独立下载 : GIF123 : https://gif123.aardio.com/ ;GifCam : https://bl…

【JavaEE】_Spring MVC 项目传参问题

目录 1. 传递单个参数 1.1 关于参数名的问题 2. 传递多个参数 2.1 关于参数顺序的问题 2.2 关于基本类型与包装类的问题 3. 使用对象传参 4. 后端参数重命名问题 4.1 关于RequestPara注解 1. 传递单个参数 现创建Spring MVC项目&#xff0c;.java文件内容如下&#xff…