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绑定确实会出现样式不更新的情况。

解决方法有以下几种:

  1. 临时方案是改用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>
  1. 或者使用内联样式替代class:
<view [@click](/user/click)="activeBtn='1'" class="btn" :style="{backgroundColor: activeBtn == '1' ? '#007AFF' : '#4CD964'}">
    <text>按钮一</text>
</view>
回到顶部