uni-app uni-list-item加上background-color样式后点击反馈失效设置clickable也没用

开发环境	版本号	项目创建方式
Windows	Windows10 20H2	HBuilderX
Android	Android 11
华为
荣耀平板

示例代码：

<view class="leftlist"   style=" background-image: url(/static/bgcolor5.png);background-position: center center;background-size: 100%;">
<uni-section title="开启点击反馈"   type="line">
<uni-list >
<uni-list-item   style="background-color:#C1E4F5;  border-bottom: 0.5rpx solid #A0A4CE;" v-for="item in info"  :title="item.Name" @click="control(item.Id)"  link />
</uni-list>
</uni-section>
</view>

操作步骤：

<view class="leftlist"   style=" background-image: url(/static/bgcolor5.png);background-position: center center;background-size: 100%;">
<uni-section title="开启点击反馈"   type="line">
<uni-list >
<uni-list-item   style="background-color:#C1E4F5;  border-bottom: 0.5rpx solid #A0A4CE;" v-for="item in info"  :title="item.Name" @click="control(item.Id)"  link />
</uni-list>
</uni-section>
</view>

预期结果：

应该有反应，被点击item背景色发生改变

实际结果：

无任何反应，只执行点击事件，样式无变化

bug描述：

去掉background-color后点击态就恢复了，加上就失效了

zlyuanteng 1楼

wuwangju 2楼

在 uni-app 中使用 uni-list-item 组件时，如果你为其设置了 background-color 样式后，点击反馈失效，即使设置了 clickable 也没有效果，这通常是因为样式覆盖了默认的点击反馈效果。

解决方法

使用 :active 伪类：你可以通过为 uni-list-item 添加 :active 伪类来模拟点击反馈效果。例如：

<template>
  <uni-list>
    <uni-list-item class="custom-item" clickable>
      <text>Item 1</text>
    </uni-list-item>
  </uni-list>
</template>

<style scoped>
.custom-item {
  background-color: #f0f0f0;
}

.custom-item:active {
  background-color: #d0d0d0; /* 点击时的背景色 */
}
</style>

这样，在点击时背景色会发生变化，模拟点击反馈。

使用 hover-class： uni-list-item 组件支持 hover-class 属性，你可以通过它来设置点击时的样式：

<template>
  <uni-list>
    <uni-list-item class="custom-item" hover-class="hover-style" clickable>
      <text>Item 1</text>
    </uni-list-item>
  </uni-list>
</template>

<style scoped>
.custom-item {
  background-color: #f0f0f0;
}

.hover-style {
  background-color: #d0d0d0; /* 点击时的背景色 */
}
</style>

这样，当用户点击或触摸 uni-list-item 时，hover-style 类会被应用，从而改变背景色。

使用 uni-list-item 的 highlight 属性： uni-list-item 组件有一个 highlight 属性，设置为 true 时，点击时会有一个默认的高亮效果。你可以结合 background-color 使用：

<template>
  <uni-list>
    <uni-list-item class="custom-item" clickable highlight>
      <text>Item 1</text>
    </uni-list-item>
  </uni-list>
</template>

<style scoped>
.custom-item {
  background-color: #f0f0f0;
}
</style>