uni-app 3.4.7 安卓NVUE box-shadow异常

uni-app 3.4.7 安卓NVUE box-shadow异常

开发环境 版本号 项目创建方式
Mac 11.6.5 HBuilderX

示例代码：

.leader-box {  
    display: flex;flex-direction: row;align-items: center;  
    border-color: red;border-width: 1.08rpx;height:120rpx;  
    background-color: #ffffff;border-radius: 10.41rpx;  
    margin-left: 20.83rpx;margin-right:20.83rpx;margin-top:20.83rpx;  
    padding-left:20.83rpx;padding-right:20.83rpx;  
    box-shadow:0 0 10.41rpx red;  
}

操作步骤：

在nvue页面使用示例代码即可。（可通过保留或删除box-shadow，观察界面变化测试）

预期结果：

显示正常。

实际结果：

异常

bug描述：

3.4.6/3.4.7 安卓NVUE使用box-shadow后显示异常：附件图左为普通的加边框的view，使用box-shadow后，阴影位置显示正确，但原边框线发生了接近于阴影模糊距离的偏移。

另：iOS正常，安卓在升级3.4.6之前正常。

image


更多关于uni-app 3.4.7 安卓NVUE box-shadow异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

HX3.4.8+版本已修复该问题

更多关于uni-app 3.4.7 安卓NVUE box-shadow异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


upup

补充：android下，阴影区域滚出屏幕外，再回来，阴影也消失了。

滚动区域外再回来阴影消失我这没复现。你可以提供个完整示例demo我这边测试下

回复 DCloud_Android_ST: 阴影区域滚出屏幕外，再回来，阴影也消失了的demo已上传

回复 njtv: 嗯 确实有问题 这个我们也会尽快修复

阴影区域滚出屏幕外，再回来，阴影也消失了的demo已上传

在 uni-app 3.4.7 版本中，使用 nvue 页面时，可能会遇到 box-shadow 样式异常的问题。这是因为 nvue 是基于原生渲染的，其样式支持与传统的 Web 视图有所不同，box-shadow 在 nvue 中并不完全支持或表现不一致。

解决方案

  1. 使用 elevation 替代 box-shadow：

    • nvue 支持 elevation 属性，可以用来实现类似阴影的效果。elevation 是 Android 原生的阴影效果，适用于 nvue 页面。
    • 示例：
      <view class="box" style="elevation: 10;"></view>
    • elevation 的值越大，阴影效果越明显。

  2. 使用 background-image 或 border 模拟阴影：

    • 如果 elevation 无法满足需求，可以通过 background-image 或 border 来模拟阴影效果。
    • 示例：
      <view class="box" style="border: 1px solid #ccc; border-radius: 5px; background-color: #fff;"></view>

  3. 使用 weex 原生组件：

    • 如果需要在 nvue 中实现复杂的阴影效果，可以考虑使用 weex 的原生组件或自定义组件来实现。

  4. 升级 uni-app 版本：

    • 如果问题是由于 uni-app 的 bug 引起的，可以尝试升级到最新版本，看看问题是否已经修复。

  5. 反馈给官方：

    • 如果以上方法都无法解决问题，可以将问题反馈给 uni-app 官方团队，等待官方修复。

示例代码

<template>
  <view class="container">
    <view class="box" style="elevation: 10;"></view>
  </view>
</template>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 10px;
}
</style>
回到顶部