uni-app nvue页面V3模式下子级view超出父级的部分在安卓中被裁剪掉了

uni-app nvue页面V3模式下子级view超出父级的部分在安卓中被裁剪掉了

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10 专业版
HBuilderX类型 正式
HBuilderX版本号 2.7.5
手机系统 Android
手机系统版本号 Android 6.0
手机厂商 小米
手机机型 Redmi Node 4
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view style="width: 200rpx; height: 200rpx; background-color: pink;">  
    <view style="margin-top: -50rpx; width: 100rpx; height: 100rpx; background-color: green;"></view>  
</view>

操作步骤：

<view style="width: 200rpx; height: 200rpx; background-color: pink;">  
    <view style="margin-top: -50rpx; width: 100rpx; height: 100rpx; background-color: green;"></view>  
</view>

预期结果：

子级view全部显示出来

实际结果：

超出父级的部分 被裁剪掉

bug描述：

父级view里包含一个子级view, 子级view超出父级的部分在安卓中被裁剪掉了
在ios中是正常显示的


更多关于uni-app nvue页面V3模式下子级view超出父级的部分在安卓中被裁剪掉了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

你看weex文档
在 Android 平台，Weex 只支持 overflow:hidden。 在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默认是 overflow:visible。 不叫裁剪，这叫超出隐藏，IOS默认overflow:visible

更多关于uni-app nvue页面V3模式下子级view超出父级的部分在安卓中被裁剪掉了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我看了下，只支持overflow:hidden，获取oaid后app闪退是什么原因呢，hbx使用2.6.16版本是可以正常获取到的，hbx使用2.7.5，v3下安卓机直接闪退

回复 孟夏廿柒: 闪退的话，我这边之前也遇到过IOS闪退，旧版本hbx正常，新版hbx不正常。我就是用新版的hbx新增项目，，再把老版代码复制过去，复制过去的时候不要覆盖掉新版的manifest.json配置文件。然后新版不闪退了。你可以试一下

大佬请问有没有好的方案解决这个超出被隐藏的问题

子view设置了position：absolute， left:-100px,超出部分被裁减了

Android 平台，Weex 只支持 overflow:hidden,所以超出的部分被隐藏了，用padding设置吧

试试 position：fix；

我也是 刚知道的

所以超出隐藏，怎末能不隐藏，还是想超出的

你这个问题解决了吗？我现在也遇到这个问题了

这是一个在Android平台上常见的nvue V3模式下的布局裁剪问题。在Android原生渲染中，默认会裁剪超出父容器范围的子元素。

解决方法有以下几种：

  1. 在父view上添加overflow:visible样式：
<view style="width: 200rpx; height: 200rpx; background-color: pink; overflow:visible">
    <view style="margin-top: -50rpx; width: 100rpx; height: 100rpx; background-color: green;"></view>
</view>
  1. 使用clipChildren属性（仅Android有效）：
<view style="width: 200rpx; height: 200rpx; background-color: pink; clip-children:false">
    <view style="margin-top: -50rpx; width: 100rpx; height: 100rpx; background-color: green;"></view>
</view>
  1. 调整布局结构，避免使用负边距，改用相对定位：
<view style="width: 200rpx; height: 200rpx; background-color: pink; position:relative">
    <view style="position:absolute; top:-50rpx; width: 100rpx; height: 100rpx; background-color: green;"></view>
</view>
回到顶部