传播星球
传播星球
  • 发布:2024-09-03 11:48
  • 更新:2024-09-04 18:13
  • 阅读:286

swiper 图片层级过高 怎么解决

分类:uni-app

swiper中放入多张图片,滑动的的时候发现图片的层级过高,swiper切的圆角没起作用;看附件,注意视频的左上角

2024-09-03 11:48 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

我用安卓11测试了下 可以切掉圆角

  • 传播星球 (作者)

    可以了 非常感谢

    2024-09-04 18:23

传播星球

传播星球 (作者)

有人知道怎么解决嘛

BFC

BFC

可以尝试在swiper-item 上面加 overflow: hidden

传播星球

传播星球 (作者)

demo工程:

7***@gmail.com

7***@gmail.com

<swiper :class="aaaaa">

7***@gmail.com

7***@gmail.com

<swiper :class="aaaaa">

7***@gmail.com

7***@gmail.com

居然連個抖動都不做的嗎啊?、
<swiper :class="aaaaa">

this.aaaaa={
borderRadius: "12px"
}

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

图片设置圆角

  • 传播星球 (作者)

    你可以试试加圆角管不管用

    2024-09-04 11:14

BFC

BFC

你好,你的代码没什么问题,但是在低版本android8.0 版本下, border-radus 配合overflow:hidden不能在view标签上面生效导致的。 android11.0 版本正常。
如果需要兼容低版本android,可自行用其他元素进行边角遮罩

box_swiper{  
            width: 686rpx;  
            height: 500rpx;  
            background-color: red;  
            border-radius: 50%;  
            overflow: hidden;  
}
  • 传播星球 (作者)

    可能我的描述有问题,swiper-item和swiper都有圆角,但是在滑动swiper-item的过程中,图片层级过高,回盖住切的圆角,我上传了一张图片,你看看就明白了

    2024-09-04 16:11

  • BFC

    回复 传播星球: 你测试用的手机的 android版本是多少

    2024-09-04 16:24

  • 传播星球 (作者)

    回复 BFC: 安卓11,这个好像很手机没啥关系,苹果安卓都是这样,那个demo代码就能测出来

    2024-09-04 16:32

7***@qq.com

7***@qq.com

    .box{  
        width: 686rpx;  
        height: 500rpx;  
        margin: 0 auto;  
        margin-top: 200rpx;  
        border-radius: 24rpx;  
        overflow: hidden;  
        .box_swiper{  
            width: 686rpx;  
            height: 500rpx;  
            background-color: cadetblue;  
            border-radius: 24rpx;  
            .swiperItem{  
                width: 100%;  
                height: 100%;  
                border-radius: 24rpx;  
                overflow: hidden;  
                .swiperItem_img{  
                    width: 100%;  
                    height: 100%;  
                }  
            }  
        }  
    }

我测微信小程序这个能盖住,app没事

要回复问题请先登录注册