eliauk
eliauk
  • 发布:2020-12-26 18:16
  • 更新:2024-07-27 15:07
  • 阅读:4023

【报Bug】在nvue中overflow: hidden无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 18362.476

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 8.1

手机厂商: 小米

手机机型: mI 5x

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

是一个view里包含着图片,view宽高200,图片宽高200,设置view和图片border-radius:100。下面那个透明黑是absolute,bottom:0,left:0。

预期结果:

黑色半透明背景会被正常隐藏

实际结果:

真机显示没有被父级遮盖,显示长方形

bug描述:

附件的截图,是一个view里包含着图片,view宽高200,图片宽高200,设置view和图片border-radius:100。下面那个透明黑是absolute,bottom:0,left:0。真机显示没有被父级遮盖。显示长方形。,, nvue或者说weex不是默认overflow:hidden的吗,为什么出现这种情况。

2020-12-26 18:16 负责人:DCloud_Android_ST 分享
已邀请:
5***@qq.com

5***@qq.com

还没修复吗

tuzi

tuzi - 90后前端

居然还没修复

DCloud_UNI_Anne

DCloud_UNI_Anne

eliauk

eliauk (作者) - 挺好的

<template>  
    <view class="content">  
        <view class="box">  
            <text class="text"></text>  
        </view>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .box{  
        height: 200rpx;  
        width: 200rpx;  
        border-radius:50%;  
        position: relative;  
        overflow: hidden;  
        background-color: #C0C0C0;  
    }  

    .text{  
        width: 200rpx;  
        height: 60rpx;  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        background-color: rgba(0,0,0,.5);  
    }  
</style>  
eliauk

eliauk (作者) - 挺好的

在iOS上显示正常

1***@qq.com

1***@qq.com

现在也还没有修复

z***@qq.com

z***@qq.com

居然还没修复

w***@126.com

w***@126.com

为什么还没修复

FireFlyTest

FireFlyTest - 萤火虫鸿蒙开发

为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复

e***@163.com

e***@163.com

3.4.6版本正常了然后3.4.6以后又不正常了

jimu

jimu

我这边也是, ios 没有问题, android 就是overflow 无效, 为了解决swiper在nvue竖向滚动不流畅的问题,我自己写了个轮播图, 结果用ios 都正常,android就是不正常, 最后确定是最外层的overflow没有生效的原因。

但是奇怪的是, 有别的nvue页面使用了overflow 又有效的。难道是几率无效?

苍山暮色烟雨迟

苍山暮色烟雨迟

nvue 如果设置宽度为

flex:1;

或者

position:  absolute  ;  
top: 0;left: 0;right: 0;bottom: 0;

这个时候安卓设置圆角就无效了... 但是ios正常

a***@yiquhudong.com

a***@yiquhudong.com

现在在android端使用还是无效

1***@qq.com

1***@qq.com

牛皮 还没有修复

lostyouth

lostyouth

还没修复[狗头]

mingyigg

mingyigg

两年过去了,官方是不准备管了吗?

wini

wini

为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复为什么还没修复

l***@163.com

l***@163.com

似乎还没修复

7***@qq.com

7***@qq.com - www.evenfs.cn

nvue基本上是在weex的基础上又做了一层封装,与其说这是uniapp的BUG不如说这是weex的BUG,其实就是一个兼容性问题,如果没法解决,那就只有两条路。

第一:更改需求
第二:曲线救国

要么就等官方解决,但是理论上需要重新发BUG贴,之所以拖这么久没解决,要么是解决不了,要么是两年前接手这个BUG的人已经离职了,在交接的时候又没有把问题交接完毕。

下面附上官方说明图供各位参考

mingyigg

mingyigg

这个还是没人修复吗?都过了这么久了

L***@126.com

L***@126.com - 哈哈

真坑还没修复

1***@qq.com

1***@qq.com

为什么还没有修复

要回复问题请先登录注册