uniapp h5项目切换导航栏及动态渲染按钮颜色

1.效果图

2.html,动态渲染按钮样式---三元判断

<!-- 切换栏 --><view class="statusList"><block v-for="(item,index) in list" :key="index"><view class="swiper-tab-list" :class="current == item.id?'active':''" @tap="getSize(item.id)">{{item.name}}<view :class="current == item.id?'bottomLine':''"></view></view></block></view>
<view class="main" v-for="(item,index) in orderList1" :key="index"><view class="part1"><!-- 动态样式 --><view:class="item.state == 0 ? 'status' : item.state == 1 ? 'status1' : item.state == 2 ? 'status2' : item.state == 3 ? 'status3' : ''">{{item.state == 0 ? '已取消' : item.state == 1 ? '待接单' :item.state == 2 ? '待回收' : item.state == 3 ? '已回收' : ''}}</view></view><view class="part2"><text class="type">{{item.type}}</text><view class=""><!-- <view class="pad"> -->约<!-- </view> --><text class="weight">{{item.weight}}</text><!-- <view class="unit"> -->kg<!-- </view> --></view></view><view class="line"></view><view class="part3"><view class=""><view class="appointment">预约时间:<text class="time">2024-02-20 11:00</text></view><view class="">回收人员:</view></view><view :class="item.evaluate == 0 ? 'evaluate' : item.evaluate == 1 ? 'evaluate1' : ''">{{item.evaluate == 0 ? '未评价' : item.evaluate == 1 ? '已评价' : ''}}</view></view></view>

3.javaScript

data() {return {// 切换栏list: [{id: 1,name: '待接单'},{id: 2,name: '待回收'},{id: 3,name: '已回收'},{id: 0,name: '已取消'},],current: 1,orderList1: [{state: 1,type: '纸类',weight: '5.5',evaluate: 0},{state: 1,type: '塑料瓶',weight: '6.5',evaluate: 1}],orderList2: [{state: 2,type: '纸类',weight: '7.5',evaluate: 0},{state: 2,type: '塑料瓶',weight: '8.5',evaluate: 1}],orderList3: [{state: 3,type: '纸类',weight: '9.5',evaluate: 0},{state: 3,type: '塑料瓶',weight: '10.5',evaluate: 1}],orderList4: [{state: 0,type: '纸类',weight: '11.5',evaluate: 0},{state: 0,type: '塑料瓶',weight: '12.5',evaluate: 0}]}},
getSize(id) {if (this.current != id) {this.current = idif (this.current == 0) {this.page = 1this.state = 0this.orderList1 = this.orderList4} else if (this.current == 1) {console.log(this.current, '11111')uni.pageScrollTo({scrollTop: this.scrollTop1,duration: 100});this.orderList1 = [{state: 1,type: '纸类',weight: '5.5',evaluate: 0},{state: 1,type: '塑料瓶',weight: '6.5',evaluate: 1}]} else if (this.current == 2) {console.log(this.current, '222222')uni.pageScrollTo({scrollTop: this.scrollTop2,duration: 100});this.orderList1 = this.orderList2} else {uni.pageScrollTo({scrollTop: this.scrollTop3,duration: 100});this.orderList1 = this.orderList3}}},

4.css

page {background: #F1F4F9;}.statusList {width: 100%;background: #fff;z-index: 999;height: 120rpx;display: flex;justify-content: space-around;align-items: center;.swiper-tab-list {position: relative;font-size: 36rpx;font-weight: 500;color: #999;.bottomLine {position: absolute;left: 50%;bottom: -10rpx;transform: translateX(-50%);width: 48rpx;height: 6rpx;background: orange;border-radius: 5rpx;text-align: center;}}.active {font-weight: bold;color: #333;}}
.main {margin: 28rpx 24rpx;background: #fff;.part1 {padding: 28rpx 36rpx 15rpx 36rpx;.status,.status1,.status2,.status3,{width: 120rpx;height: 50rpx;background-color: red;border-radius: 15rpx;color: white;text-align: center;line-height: 50rpx;// margin: 28rpx 0 24rpx 36rpx;}.status1 {background-color: rgb(214, 170, 75);}.status2 {background-color: orange;}.status3 {background-color: orange;}}
.part2 {display: flex;justify-content: center;// align-items: center;height: 57rpx;line-height: 57rpx;margin-bottom: 34rpx;.type {font-family: Source Han Sans SC;font-weight: 500;font-size: 36rpx;color: #000000;opacity: 0.85;margin-right: 35rpx;line-height: 70rpx;}.pad {margin-right: 15rpx;font-family: Source Han Sans SC;font-size: 24rpx;color: #000000;opacity: 0.85;line-height: 76rpx;}.weight {font-family: Source Han Sans SC;font-weight: 500;font-size: 60rpx;color: #3EAAFB;margin-right: 16rpx;// line-height: 11rpx;}.unit {font-size: 24rpx;color: #000000;opacity: 0.85;line-height: 76rpx;}}
.part3 {padding: 0 36rpx 15rpx 36rpx;display: flex;justify-content: space-between;align-items: flex-end;.appointment {display: flex;align-items: flex-end;.time {font-family: Source Han Sans SC;font-weight: 400;font-size: 24rpx;color: #000000;opacity: 0.45;}}.evaluate,.evaluate1 {width: 120rpx;height: 50rpx;background-color: red;text-align: center;color: white;border-radius: 15rpx;}.evaluate {background: red;}.evaluate1 {font-family: Source Han Sans SC;font-weight: 400;color: #000000;opacity: 0.45;background: #EBEBEB;}}

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

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

相关文章

CEEMDAN +组合预测模型(CNN-Transfromer + XGBoost)

注意&#xff1a;本模型继续加入 组合预测模型全家桶 中&#xff0c;之前购买的同学请及时更新下载! 往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;Transformer-BiGRU预测模…

静态加速和动态加速是啥区别

以下是两者之间的主要区别&#xff1a; 加速对象与内容&#xff1a; 静态加速&#xff1a;主要针对网页中的静态资源&#xff0c;如HTML文件、CSS文件、JavaScript文件、图片、Flash动画等。这些资源的特点是更新频率较低&#xff0c;适合通过缓存技术加速。 动态加速&#xf…

网络学习(11) |深入解析客户端缓存与服务器缓存:HTTP缓存控制头字段及优化实践

文章目录 客户端缓存与服务器缓存的区别客户端缓存浏览器缓存应用程序缓存优点缺点 服务器缓存优点缺点 HTTP缓存控制头字段Cache-ControlExpiresLast-ModifiedETag 缓存策略的优化与实践经验分享1. 使用合适的缓存头字段2. 结合使用Last-Modified和ETag3. 利用CDN进行缓存4. 实…

【JAVA WEB实用与优化技巧】如何自己封装一个自定义UI的Swagger组件,包含Swagger如何处理JWT无状态鉴权自动TOKEN获取

目录 一、Swagger 简介1. 什么是 Swagger&#xff1f;2. 如何使用 Swagger3. Springboot 中swagger的使用示例1. maven 引入安装2. java配置 二、Swagger UI存在的缺点1.不够方便直观2.请求的参数没有缓存3.不够美观4.如果是JWT 无状态登录&#xff0c;Swagger使用起来就没有那…

STL-stack的使用及其模拟实现

在C标准库中&#xff0c;stack是一种容器适配器&#xff0c;它以后进先出的方式组织数据&#xff0c;其删除只能从容器的栈顶进行元素的插入与取出操作。 stack的使用 stack的构造函数 stack的成员函数 empty&#xff1a;判断栈是否为空back&#xff1a;返回当前栈中元素的数量…

docker之自制django镜像

一&#xff0c;安装docker&#xff08;本作者往期文章有docker安装 &#xff0c;或者更详细的有关docker安装&#xff09; 二&#xff0c;拉取centos7镜像 docker pull centos:7 三&#xff0c;创建容器 docker run -id -v /root/docker/soft:/soft -p 8000:8000 --name djang…

Redis实践记录与总结

最近生产环境缓存数据库数据过大&#xff08;如何搭建单服务redis缓存数据库&#xff1f;以及可视化工具Another Redis Desktop Manager使用&#xff09;&#xff0c;导致在对数据库做rdb快照备份时消耗内存过大&#xff0c;缓存数据库宕机一小时。基础运维通过增加虚拟机内存暂…

spark相关知识

1.Spark的特点 Spark的设计遵循“一个软件栈满足不同应用场景”的理念&#xff0c;逐渐形成了一套完整的生态系统&#xff0c;既能够提供内存计算框架&#xff0c;也可以支持SQL即席查询、实时流式计算、机器学习和图计算等。 运行速度快&#xff0c;易使用&#xff0c;强大的技…

kube-prometheus-stack 识别 k8s 集群内所有的 ServiceMonitor 和 PrometheusRule

默认情况下&#xff0c;kube-prometheus-stack 只自己创建的 ServiceMonitor&#xff0c;如果 k8s 集群内有多个非 kube-prometheus-stack 创建的 ServiceMonitor&#xff0c;不会被识别到。PrometheusRule 同理。 要识别所有的 ServiceMonitor 和 PrometheusRule &#xff0c;…

推荐一个 Java 开源企业级新能源汽车智能共享充电桩管理平台

文末可获取 Orise 平台源码 01 Orise 智能充电桩管理平台 奥升( Orise ) 新能源汽车充电桩管理 Saas 云平台是一个集充电设备管理、用户充电管理、线上小程序内容管理于一体的综合管理平台。Orise充电桩平台支持高并发业务、业务动态伸缩、桩通信负载均衡&#xff0c;通过Docke…

关于 kubernetes 的9个核心问题解答

本文通过提问题的方式对在 Kubernetes 集群建设中&#xff0c;不同的网络组件、存储方案、CI/CD工具、监控系统、网关服务以及服务网格&#xff08;如 Istio&#xff09;等选择给出一定的参考解答&#xff1b;但在实际工作中需要紧密结合业务规模、系统性能需求、安全性要求以及…

Golang项目代码组织架构实践

Golang在项目结构上没有强制性规范&#xff0c;虽然这给了开发者很大的自由度&#xff0c;但也需要自己沉淀一套可行的架构。本文介绍了一种项目布局&#xff0c;可以以此为参考设计适合自己的 Golang 项目组织模式。原文: Golang Project Layout Go 有很多强制的或是约定俗成的…

收藏:六款好用的企业防泄密软件推荐

企业数据如同企业的生命线&#xff0c;保护数据安全免遭泄露变得至关重要。 面对日益复杂的网络安全威胁&#xff0c;一套高效的企业防泄密软件成为企业安全架构的基石。 以下是精心挑选的六款企业防泄密软件&#xff0c;它们在数据加密、访问控制、行为监控等方面表现出色&am…

lua vm 常识一: attempt to yield across a C-call boundary 的原因分析

使用 lua 的时候有时候会遇到这样的报错&#xff1a;“attempt to yield across a C-call boundary”。 1. 网络上的解释 可以在网上找到一些关于这个问题的解释。 1.1 解释一 这个 issue&#xff1a;一个关于 yield across a C-call boundary 的问题&#xff0c;云风的解释是…

轮廓系数(Average silhouette) | 最佳聚类数的判定

1.最佳分类个数 # 辅助确定最佳聚类数 4.7*2.6 factoextra::fviz_nbclust( t(DPAU_2), kmeans, method "silhouette")在2有下降拐点&#xff0c;但是样本较多时分成2类一般意义不大。 在7时也有下降拐点。 2.查看每个分类的轮廓系数 (1) pam k5 library(cluste…

【Paddle】Inplace相关问题:反向传播、影响内存使用和性能

【Paddle】Inplace相关问题&#xff1a;反向传播、影响内存使用和性能 写在最前面inplace 的好处有哪些&#xff1f;能降低计算复杂度吗在反向传播时&#xff0c;Inplace为什么会阻碍呢&#xff1f;“计算图的完整性受损”表达有误原地操作 sin_()为什么原地操作会阻碍反向传播…

活动会议邀请函制作易企秀源码系统 清爽的画面轻轻滑动自动翻页 带完整的前后端搭建教程

系统概述 在当今数字化时代&#xff0c;活动会议的组织和宣传变得至关重要。为了满足这一需求&#xff0c;活动会议邀请函制作易企秀源码系统应运而生。它不仅为用户提供了一个便捷、高效的工具&#xff0c;还具备一系列令人瞩目的特色功能&#xff0c;为活动会议的成功举办提…

Ubuntu22.04设置程序崩溃产生Core文件

Ubuntu22.04设置程序崩溃产生Core文件 文章目录 Ubuntu22.04设置程序崩溃产生Core文件摘要Ubuntu 生成Core文件配置1. 检查 core 文件大小限制2. 设置 core 文件大小限制3. 配置 core 文件命名和存储路径4. 重启系统或重新加载配置5. 测试配置 关键字&#xff1a; Ubuntu、 C…

Dubbo底层RPC原理深度解析

Dubbo作为一款高性能的分布式服务框架&#xff0c;其核心在于其底层的RPC实现&#xff0c;它允许服务在分布式系统中的不同节点间透明地进行远程调用。以下是Dubbo底层RPC原理的详细介绍&#xff1a; 基本概念 RPC&#xff08;Remote Procedure Call&#xff09;是一种编程模型…

CSS浮动详细教学(CSS从入门到精通学习第四天)

css第04天 一、其他样式 1、圆角边框 在 CSS3 中&#xff0c;新增了圆角边框样式&#xff0c;这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法&#xff1a; border-radius:length; 参数值可以为数值或百分比的形式如果是正方形&…