uni-app 安卓原生app特有的bug描述

uni-app 安卓原生app特有的bug描述

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：所有

页面类型：nvue

打包方式：离线

示例代码：

<!-- 动态切换loginStatus的时候 图片圆角与预期的不一样 -->  
<image v-if="loginStatus"  class="head-img-1" />  
<image v-else  class="head-img-2" />  

<style>  
    .head-img-1 {  
        width: 80rpx;  
        height: 80rpx;  
        background-color: #999999;  
        border-radius: 40rpx;  
    }  

    .head-img-2 {  
        width: 80rpx;  
        height: 80rpx;  
        background-color: #999999;  
        border-radius: 8rpx;  
    }  
</style>

操作步骤：

<!-- 动态切换loginStatus的时候 图片圆角与预期的不一样 -->  
<image v-if="loginStatus" style="width: 80rpx;height: 80rpx;background-color: #999999;border-radius: 40rpx;" />  
<image v-else style="width: 80rpx;height: 80rpx;background-color: #999999;border-radius: 8rpx;" />

预期结果：

多次切换之后再切换 loginStatus为false时是小圆角方形的图片，loginStatus为true时是全圆形的图片。

实际结果：

多次切换之后再切换 loginStatus为true时却是小圆角方形的图片 或者 loginStatus为false时却是全圆形的图片。

bug描述：

详情见网址 https://ask.dcloud.net.cn/article/39116


更多关于uni-app 安卓原生app特有的bug描述的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 安卓原生app特有的bug描述的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue样式渲染问题。在Android平台，当使用条件渲染(v-if/v-else)动态切换相同尺寸但不同border-radius的image组件时，可能会出现圆角样式缓存或渲染错误。

问题原因可能是nvue的渲染引擎在样式切换时未能正确更新圆角属性。建议的解决方案：

  1. 为两个image添加不同的key属性强制重新渲染：
<image v-if="loginStatus" class="head-img-1" :key="1" />
<image v-else class="head-img-2" :key="2" />
  1. 或者使用动态class绑定替代条件渲染：
<image :class="loginStatus ? 'head-img-1' : 'head-img-2'" />
回到顶部