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 = id

					if (this.current == 0) {
						this.page = 1
						this.state = 0
						this.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;
		}
	}