uni-app position absolute 在nvue中的布局样式错误没有按照父视图的尺寸展示

uni-app position absolute 在nvue中的布局样式错误没有按照父视图的尺寸展示

开发环境 版本号 项目创建方式
Mac MacOS15.5 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iPhone12

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：

<cover-view class="callout-footprint-container">  
    <cover-image  
      class="callout-bubble"  
      style="background-color: red"  
      src="/static/images/home/callout/bubble.png"  
      mode="scaleToFill"  
    />  
</cover-view>

// 显示正常的样式，必须设置cover-image的宽高

.callout-footprint-container {  
  margin-bottom: 93rpx;  
  width: 356rpx;  
  height: 124rpx;  
  z-index: 9990;  
  position: relative;  

  .callout-bubble {  
    position: absolute;  
    top: 10rpx;  
    left: 0;  
    width: 356rpx;  
    height: 114rpx;  
  }  
}

// 显示错误的样式

.callout-footprint-container {  
  margin-bottom: 93rpx;  
  width: 356rpx;  
  height: 124rpx;  
  z-index: 9990;  
  position: relative;  

  .callout-bubble {  
    position: absolute;  
    top: 10rpx;  
    right: 0;  
    bottom: 0;  
    left: 0;  
  }  
}

操作步骤：

运行就复现

预期结果：

正常显示图片

实际结果：

图片尺寸显示错误

bug描述：

cover-image在nvue中使用，运行后布局样式错误。

布局代码：

.callout-bubble {  
    position: absolute;  
    top: 10rpx;  
    right: 0;  
    bottom: 0;  
    left: 0;  
  }

显示结果cover-image并没有按照父视图的尺寸进行显示，而是超出了父视图


更多关于uni-app position absolute 在nvue中的布局样式错误没有按照父视图的尺寸展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

试下页面类型改成vue呢？

更多关于uni-app position absolute 在nvue中的布局样式错误没有按照父视图的尺寸展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是map地图组件，运行到app上，所以只能是nvue来写

在 nvue 中使用 position: absolute 布局时，确实需要注意一些特殊行为。从你的代码来看，问题在于 cover-image 在仅设置 top/right/bottom/left 而没有明确宽高时，布局计算可能出现异常。

在 nvue 中，绝对定位元素的尺寸计算规则与普通 webview 有所不同。当只设置定位值而不指定宽高时，引擎可能无法正确推断元素尺寸。这就是为什么第一种写法（明确设置宽高）正常，而第二种写法异常的原因。

解决方案：

  1. 明确设置宽高（推荐）
.callout-bubble {
  position: absolute;
  top: 10rpx;
  left: 0;
  width: 356rpx;
  height: 114rpx;
}
  1. 如果希望自适应父容器，可以这样写：
.callout-bubble {
  position: absolute;
  top: 10rpx;
  left: 0;
  right: 0;
  height: 114rpx; /* 至少指定一个维度 */
}
回到顶部