uni-app nvue IOS下圆角和背景色设置bug

uni-app nvue IOS下圆角和背景色设置bug

示例代码：

<view class="content">  
      <view v-for="val in 20" :key="val" style="width:100rpx;height:100rpx;" :class="{checked:val===inx}" @click="inx=val">{{val}}</view>  
    </view>  

.content {  
    flex-direction: row;  
    flex-wrap: wrap;  
    }  
  .checked{  
    background:blue;  
    /*border-radius:20rpx;*/  
    border-radius:20rpx 0 0 20rpx;  
  }

操作步骤：

  • 点击不同的元素

预期结果：

  • 点击元素有背景色，其他元素没有背景色

实际结果：

  • 点击后出现背景色，但其他元素背景色未消除

bug描述：

nvue页面，在苹果上同时设置不到四个圆角和背景色的时候，动态改变无法消除背景色，附件有源码和表现视频，默认模板创建的新项目

信息类型 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 家庭中文版 21H1
HBuilderX类型 Alpha
HBuilderX版本号 3.4.9
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 iPhone XR / iPhone 13 Plus
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

相关链接：

新建文件夹.zip


更多关于uni-app nvue IOS下圆角和背景色设置bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

代码也有，表现视频也有，就是没有人管啊

更多关于uni-app nvue IOS下圆角和背景色设置bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX 3.5.2+ 版本已修复此问题

哇瑞顾得

在 uni-app 的 nvue 页面中，尤其是在 iOS 平台上，确实存在一些关于圆角和背景色设置的已知问题。以下是一些常见的 bug 及其可能的解决方案：

1. 圆角设置无效

在 nvue 页面中，使用 border-radius 设置圆角时，有时在 iOS 上可能无效。

解决方案：

  • 确保你使用的是 nvue 支持的样式属性。nvue 的样式支持与传统的 vue 页面有所不同。

  • 尝试使用 overflow: hidden 来强制裁剪圆角。例如：

    .my-view {
  border-radius: 10px;
  overflow: hidden;
}

2. 背景色设置无效

在某些情况下，设置 background-color 可能不会生效。

解决方案：

  • 确保你使用的是 nvue 支持的样式属性。

  • 尝试使用 background 属性而不是 background-color。例如：

    .my-view {
  background: #ff0000;
}

3. 圆角和背景色同时设置时的问题

在 iOS 上，当同时设置圆角和背景色时，可能会出现背景色溢出或圆角不生效的情况。

解决方案：

  • 使用 overflow: hidden 来强制裁剪圆角。

  • 确保父容器也设置了 border-radius 和 overflow: hidden，以防止背景色溢出。

    .parent-view {
  border-radius: 10px;
  overflow: hidden;
}

.child-view {
  background: #ff0000;
}

4. 使用 mask 属性

在某些情况下，使用 mask 属性可以解决圆角和背景色的问题。

解决方案：

  • 使用 mask 属性来裁剪内容。例如：

    .my-view {
  border-radius: 10px;
  mask: url(#mask);
}

5. 使用 clip-path

clip-path 是另一种可以用来裁剪元素的方法。

解决方案：

  • 使用 clip-path 来裁剪元素。例如：

    .my-view {
  clip-path: inset(0 0 0 0 round 10px);
}

6. 使用 uni-app 提供的组件

uni-app 提供了一些内置组件，如 uni-view，这些组件在某些情况下可能更稳定。

解决方案：

  • 尝试使用 uni-view 组件来替代普通的 view 组件。

    <uni-view class="my-view">
  <!-- 内容 -->
</uni-view>
回到顶部