我想根据条件修改uni-list-item的背景色，但是v-deep穿透无效

分类：uni-app

uniapp

我给力uni-list-item一个动态样式:class="status-${order.status}"，然后在css里写了以下样式，但是无效，应该如何处理？

::v-deep .uni-list {  

                        // 成功状态  
            .status-completed {  
                background-color: #18bc37 !important;  
                .uni-list-item {  
                    background-color: #18bc37 !important;  
                }  
            }  

            // 取消状态  
            .status-canceled {  
                background-color: #f3a73f !important;  
                .uni-list-item {  
                    background-color: #f3a73f !important;  
                }  
            }  

            .status-submitted {  
                .uni-list-item {  
                    background-color: #8f939c !important;  
                }  
            }  
}

2025-06-24 15:52 负责人:无分享

2 个回复

DCloud_UNI_yuhe

使用的哪个平台？版本是多少？

1***@163.com (作者)

钉钉小程序，版本是指哪个版本？用的是最新版本的uniui

2025-06-24 19:55
DCloud_UNI_yuhe

回复 1***@163.com: 你使用的是新版吗？新版没有这个样式了

2025-06-24 20:13
1***@163.com (作者)

回复 DCloud_UNI_yuhe: 1.2.14，hb生成的uniui的项目自带的，我也不知道新版本是多少

2025-06-24 20:43
DCloud_UNI_yuhe

回复 1***@163.com: 你的代码里面有这个样式？你提供一下一个测试项目

2025-06-25 09:31

1***@163.com (作者)

@DCloud_UNI_yuhe 代码结构是这样的

            <uni-list>  
                <uni-list-item v-for="order in orders" :key="order.id" :title="order.order_no" :note="formatNote(order)"  
                    :rightText="formatStatus(order.status)" :rightTextStyle="getStatusStyle(order.status)" clickable  
                    @click="showOrderDetail(order)" :class="`status-${order.status}`">  
                    <template v-slot:footer>  
                        <view class="order-footer">  
                            <text class="order-amount">¥{{ order.total_amount }}</text>  
                            <text class="order-time">{{ formatTime(order.created_at) }}</text>  
                        </view>  
                    </template>  
                </uni-list-item>  
            </uni-list>

DCloud_UNI_yuhe

你写的： status-completed 定义在哪里？

2025-06-25 13:18
1***@163.com (作者)

回复 DCloud_UNI_yuhe: uni-list-item

2025-06-26 09:34
1***@163.com (作者)

回复 DCloud_UNI_yuhe: status-completed是动态生成的，会根据order的status属性值变化，请问有什么办法可以改变背景色吗？

2025-07-01 13:27

要回复问题请先登录或注册

我想根据条件修改uni-list-item的背景色，但是v-deep穿透无效

2 个回复

公告

相关问题

我想根据条件修改uni-list-item的背景色，但是v-deep穿透无效

与内容相关的链接

2 个回复

公告

相关问题