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;}}