- 发布：2021-02-04 17:43
- 更新：2021-02-18 11:33
- 阅读：689
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.6
HBuilderX类型： Alpha
HBuilderX版本号： 3.1.0
手机系统： 全部
手机厂商： 华为
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<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>
<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切换就不行了
