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.rhkb.cn/news/335715.html

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

相关文章

【STL】C++ stack(栈) 基本使用

目录 一 stack常见构造 1 空容器构造函数&#xff08;默认构造函数&#xff09; 2. 使用指定容器构造 3 拷贝构造函数 二 其他操作 1 empty 2 size 3 top 4 push && pop 5 emplace 6 swap 三 总结 一 stack常见构造 1 空容器构造函数&#xff08;默认构造…

西储大学数据集学习

数据集下载地址&#xff1a;CWRU凯斯西储大学轴承数据数据集——附&#xff1a;下载链接_西储大学轴承数据集下载-CSDN博客 最近研究故障诊断&#xff0c;先对使用比较多的西储大学数据集研究。以资料【1】中的内容展开研究。 1、轴承的结构 轴承分为外圈、内圈、保持架和滚珠…

202474读书笔记|《我自我的田渠归来》——愿你拥有向上的力量,一切的好事都应该有权利发生

202474读书笔记|《我自我的田渠归来》——愿你拥有向上的力量 《我自我的田渠归来》作者张晓风&#xff0c;被称为华语散文温柔的一支笔&#xff0c;她的短文很有味道&#xff0c;角度奇特&#xff0c;温柔慈悲而敏锐。 很幸运遇到了这本书&#xff0c;以她的感受重新认识一些事…

端口扫描利器--nmap

目录 普通扫描 几种指定目标的方法 TCP/UDP扫描 端口服务扫描 综合扫描 普通扫描 基于端口连接并响应(真实) ​ nmap -sn 网段(0/24)-sn 几种指定目标的方法 单个IP扫描 IP范围扫描 扫描文件里的IP 扫描网段,(排除某IP) 扫描网段(排除某清单IP) TCP/UDP扫描 -sS …

windows系统电脑外插键盘驱动出现感叹号或者显示未知设备,键盘无法输入的解决办法

笔记本外插的键盘不能用&#xff0c;鼠标可以使用。 查找故障&#xff0c;结果打开设备管理器看到键盘那项里是一个的黄色惊叹号显示未知设备&#xff01;[图片]如下图所示 其实解决办法很简单&#xff0c;不要相信网上的一些博主说删除什么注册表&#xff0c;我开始跟着他们操…

C++笔试强训day36

目录 1.提取不重复的整数 2.【模板】哈夫曼编码 3.abb 1.提取不重复的整数 链接https://www.nowcoder.com/practice/253986e66d114d378ae8de2e6c4577c1?tpId37&tqId21232&ru/exam/oj 按照题意模拟就行&#xff0c;记得从右往左遍历 #include <iostream> usi…

React基础知识笔记

Reat简介 React&#xff1a;用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。是一个将视图渲染为html视图的开源库 第一章&#xff1a;React入门 相关js库 react.development.js &#xff1a;React 核心库react-dom.development.js &#xff1a;提供 DOM 操作的…

【分享】3种方法取消PPT的“限制保护”

PPT如果设置了有密码的“只读方式”&#xff0c;每次打开PPT&#xff0c;都会出现对话框&#xff0c;提示需要输入密码才能修改文件&#xff0c;否则只能以“只读方式”打开。 以“只读方式”打开的PPT就会被限制&#xff0c;无法进行编辑修改等操作。那如果后续不需要“限制保…

【Linux进程篇】Linux进程管理——进程创建与终止

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 目录 进程创建 fork函数初识 写时拷贝 fork常规用法 fork调用失败的原因 进程终止 进程退出场景 _exit函数 exit函数 return退出 进程创建 fork函数初识 在linux中fork函数时非常重要的函数&#xff0c;它从已…

Python Selenium 详解:实现高效的UI自动化测试

落日余辉&#xff0c;深情不及久伴。大家好&#xff0c;在当今软件开发的世界中&#xff0c;自动化测试已经成为保障软件质量和快速迭代的重要环节。而在自动化测试的领域中&#xff0c;UI自动化测试是不可或缺的一部分&#xff0c;它可以帮助测试团队快速验证用户界面的正确性…

huggingface的self.state与self.control来源(TrainerState与TrainerControl)

文章目录 前言一、huggingface的trainer的self.state与self.control初始化调用二、TrainerState源码解读(self.state)1、huggingface中self.state初始化参数2、TrainerState类的Demo 三、TrainerControl源码解读(self.control)总结 前言 在 Hugging Face 中&#xff0c;self.s…

Kong网关的负载均衡

安装java环境 查询 java安装包 196 yum list java* 安装java8197 yum install -y java-1.8.0-openjdk.x86_64 检验java8是否安装成功。198 java -version2个tomcat准备 另外一个tomcat区别在于&#xff1a;配置文件。conf/server.xml 启动tomcat [rootlocalhost bin]# ./…

JDBC使用步骤-小白入门

一.JDBC开发流程 加载并注册JDBC驱动创建数据库连接创建Statement对象遍历查询结果关闭连接,释放资源 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement;public class StandardJDBCSample {public static …

【busybox记录】【shell指令】unlink

目录 内容来源&#xff1a; 【GUN】【unlink】指令介绍 【busybox】【unlink】指令介绍 【linux】【unlink】指令介绍 使用示例&#xff1a; 删除文件 - 默认 常用组合指令&#xff1a; 指令不常用/组合用法还需继续挖掘&#xff1a; 内容来源&#xff1a; GUN &#x…

element-ui 实现输入框下拉树组件(2024-05-23)

用element-ui的 el-input&#xff0c;el-tree&#xff0c;el-popover组件组合封装 import url("//unpkg.com/element-ui2.15.14/lib/theme-chalk/index.css"); <script src"//unpkg.com/vue2/dist/vue.js"></script> <script src"//…

单链表经典算法题理解

目录 1. 前言&#xff1a; 2. 移除链表元素 3. 反转链表 4. 合并两个有序链表 5. 链表的中间节点 6. 环形链表的约瑟夫问题 7. 分割链表 1. 前言&#xff1a; 当我们学习了单链表之后&#xff0c;我能可以尝试的刷一下题了&#xff0c;以下分享一下几道题的解法 2. 移…

HR招聘面试测评,哪些工作岗位需要测评创新能力?

什么是创新能力&#xff1f; 创新能力指在现有的物质基础上&#xff0c;通过某些特定的条件&#xff0c;促成满足未来社会发展的新事物。无论是个人还是国家都需要巨大的创新能力&#xff0c;因为创新是一切发展的根基&#xff0c;离开了创新&#xff0c;所有的发展都是原地踏…

串口通信问题排查总结

串口通信问题排查 排查原则&#xff1a; 软件从发送处理到接收处理&#xff0c;核查驱动、控制及发送接收数据是否正常。硬件从发送到接收&#xff0c;针对信号经过的各段&#xff0c;分段核对信号是否正常。示波器、逻辑分析仪。用万用表、示波器、逻辑分析仪等工具&#xf…

23种设计模式之一— — — —装饰模式详细介绍与讲解

装饰模式详细讲解 一、定义二、装饰模式结构核心思想模式角色模式的UML类图应用场景模式优点模式缺点 实例演示图示代码演示运行结果 一、定义 装饰模式&#xff08;别名&#xff1a;包装器&#xff09; 装饰模式&#xff08;Decorator Pattern&#xff09;是结构型的设计模式…

U盘无法打开?数据恢复与预防措施全解析

在日常生活和工作中&#xff0c;U盘已成为我们存储和传输数据的重要工具。然而&#xff0c;有时我们会遇到U盘无法打开的情况&#xff0c;这无疑给我们带来了诸多不便。本文将深入探讨U盘打不开的现象、原因及解决方案&#xff0c;并分享如何预防此类问题的发生。 一、U盘无法访…