uni-app 3.1.0版本nvue在list组件中动态切换class样式失效
uni-app 3.1.0版本nvue在list组件中动态切换class样式失效
类别 | 信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Mac |
PC版本号 | 10.15.6 |
HBuilderX类型 | Alpha |
HBuilderX版本 | 3.1.0 |
手机系统 | 全部 |
手机厂商 | 华为 |
页面类型 | nvue |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
测试过的手机:
红米note9 iphonexr
示例代码:
<template>
<!-- 经测试发现,3.1.0版本nvue的class样式在list组件中失效 -->
<list>
<cell>
<view @click="activeBtn='1'" class="btn" :class="{'active-btn':activeBtn == '1'}">
<text>按钮一</text>
</view>
<view @click="activeBtn='2'" class="btn" :class="{'active-btn':activeBtn == '2'}">
<text>按钮二</text>
</view>
<view>
<text>activeBtn当前值:{{activeBtn}}</text>
</view>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
activeBtn:'0'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.btn{
margin-top: 20rpx;
height: 100rpx;
justify-content: center;
align-items: center;
background-color: #4CD964;
}
.active-btn{
background-color: #007AFF;
}
</style>
操作步骤:
见演示视频与复现代码
预期结果:
点击按钮,按钮变蓝色
实际结果:
点击按钮,按钮没有变色
bug描述:
升级到3.1.0之后,发现一些原本在list组件的动态切换效果失效了。如下面示例代码,点击按钮会切换active-btn的样式。本来按钮是绿色的,点击之后应该会变成蓝色。但是升级3.1.0之后,这个class切换就不行了
更多关于uni-app 3.1.0版本nvue在list组件中动态切换class样式失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
收到
更多关于uni-app 3.1.0版本nvue在list组件中动态切换class样式失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
问题确认,已加分,后续修复
HBuilderX 3.1.2 已经修复
这是一个已知的3.1.0版本中的nvue list组件渲染问题。在list组件中使用动态class绑定确实会出现样式不更新的情况。
解决方法有以下几种:
- 临时方案是改用v-if条件渲染代替class切换:
<view [@click](/user/click)="activeBtn='1'" class="btn" v-if="activeBtn != '1'">
<text>按钮一</text>
</view>
<view [@click](/user/click)="activeBtn='1'" class="btn active-btn" v-else>
<text>按钮一</text>
</view>
- 或者使用内联样式替代class:
<view [@click](/user/click)="activeBtn='1'" class="btn" :style="{backgroundColor: activeBtn == '1' ? '#007AFF' : '#4CD964'}">
<text>按钮一</text>
</view>