Angel蓝汐

发布：2024-04-10 10:24
更新：2024-04-10 10:58
阅读：226

【报Bug】swiper 组件的圆角裁剪不掉

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 13.6.5

HBuilderX类型：正式

HBuilderX版本号： 4.11

手机系统： iOS

手机系统版本号： iOS 14

手机厂商：苹果

手机机型： iPhone 12 Pro Max

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

.swiper {
width: 100%;
height: 100%;
border-radius: 32rpx;
overflow: hidden;

            .swiper-item {  
                width: 100%;  
                height: 100%;  
                // border-radius: 32rpx;  
                // overflow: hidden;  

                .pic-img {  
                    width: 100%;  
                    height: 100%;  
                    border-radius: 32rpx;  
                    overflow: hidden;  
                }  
            }  
        }

操作步骤：

必现

预期结果：

裁剪内部view圆角

实际结果：

内部滑动内容四周就没有圆角了

bug描述：

swiper 组件的圆角裁剪不掉

使用css方法
border-radius: 32rpx;
overflow: hidden;

不管是对swiper还是swiper的父组件，在切换swiper的时候，圆角还是会漏出来

2024-04-10 10:24 负责人:无分享

1 个回复

爱豆豆 - 办法总比困难多

你想要的是啥样的效果？能提供个截图或者录屏看下你的问题嘛？
你说的是swiper内图片的圆角还是swiper标签的圆角
是这样的效果吗？

6***@qq.com

nvue页面的map能咋设置圆角的啊哥

2025-07-07 17:57

要回复问题请先登录或注册

【报Bug】swiper 组件的圆角裁剪不掉

示例代码：

.swiper {
width: 100%;
height: 100%;
border-radius: 32rpx;
overflow: hidden;

`.swiper-item { width: 100%; height: 100%; // border-radius: 32rpx; // overflow: hidden; .pic-img { width: 100%; height: 100%; border-radius: 32rpx; overflow: hidden; } } }`

操作步骤：

必现

预期结果：

裁剪内部view圆角

实际结果：

内部滑动内容四周就没有圆角了

bug描述：

1 个回复

公告

相关问题

【报Bug】swiper 组件的圆角裁剪不掉

示例代码： .swiper { width: 100%; height: 100%; border-radius: 32rpx; overflow: hidden; .swiper-item { width: 100%; height: 100%; // border-radius: 32rpx; // overflow: hidden; .pic-img { width: 100%; height: 100%; border-radius: 32rpx; overflow: hidden; } } }

操作步骤： 必现

预期结果： 裁剪内部view圆角

实际结果： 内部滑动内容四周就没有圆角了

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

示例代码：

.swiper {
width: 100%;
height: 100%;
border-radius: 32rpx;
overflow: hidden;

`.swiper-item { width: 100%; height: 100%; // border-radius: 32rpx; // overflow: hidden; .pic-img { width: 100%; height: 100%; border-radius: 32rpx; overflow: hidden; } } }`

操作步骤：

必现

预期结果：

裁剪内部view圆角

实际结果：

内部滑动内容四周就没有圆角了