uni-app 子窗体style 设置top值窗体内顶部会增加相应高度

uni-app 子窗体style 设置top值窗体内顶部会增加相应高度

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX类型 正式
HBuilderX版本 3.2.10
手机系统 Android
手机版本号 Android 11
手机厂商 小米
手机机型 红米k40
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

{
    "id": "airshipNotice",
    "path": "subNVue/airshipNotice/index",
    "style": {
        "popGesture": "none",
        "position": "position",
        "height": "200px",
        "top":"100px",
        "background": "rgba(0,0,0,0.1)"
    }
}

子窗体页面代码

<view>   
    <view style="height: 50px; background-color: #FFFFFF;">12312311111111111111111</view>  
</view>

操作步骤：

如上代码

预期结果：

窗体内容正常显示

实际结果：

窗体内头部高度增高

bug描述：

子窗体style 设置top值窗体内顶部会增加相应高度

示例图片


更多关于uni-app 子窗体style 设置top值窗体内顶部会增加相应高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

完整示例提供一下

更多关于uni-app 子窗体style 设置top值窗体内顶部会增加相应高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


示例已上传， 还有一个问题：在调试子窗体的时候需要手动点击重新编译才会更新到手机上

回复 2***@qq.com: 好 我们复现看看 重新编译的问题可能是你运行环境有其他ADB 导致冲突了

回复 DCloud_Android_ST: 好的，还有一个问题子窗再不设置type的情况下是默认展示的，但是在关闭之后只是关闭了当前页面的子窗但是其他页面的还在，就是我在示例中的这个子窗，要怎么解决这个问题呢

回复 2***@qq.com: 我只解决目前你上报的问题 其他问题你可以等解决了再说

subNVues 去掉配置background

可是我需要透明背景，默认是白色背景

HX3.2.14已修复

更新了么 ? 现在又有问题了 原生子窗体的top 怎么还需要加电量条的高度?

这是一个已知的 nvue 子窗体布局问题。当设置 top 值时，子窗体的内容区域确实会从顶部开始计算，导致内部元素顶部出现空白区域。

问题原因： 在 nvue 的子窗体中，style 中设置的 top 值会影响整个窗体的定位，但窗体的内容布局坐标系似乎没有正确偏移，导致内容区域仍然从屏幕顶部（而非窗体顶部）开始计算。

解决方案： 目前最有效的解决方法是避免在子窗体的 style 中直接设置 top 值，改为在子窗体内部使用绝对定位来实现相同的效果。

修改你的子窗体页面代码：

<view class="container">
    <view style="position: absolute; top: 100px; height: 50px; background-color: #FFFFFF;">
        12312311111111111111111
    </view>
</view>

同时修改子窗体配置，移除 top 设置：

{
    "id": "airshipNotice",
    "path": "subNVue/airshipNotice/index",
    "style": {
        "popGesture": "none",
        "position": "position",
        "height": "200px",
        "background": "rgba(0,0,0,0.1)"
    }
}
回到顶部