微信小程序开发----- swiper设置圆角时，瞬间直角问题, 解决方法

破裤兜

已于 2023-08-02 14:35:22 修改

阅读量3.1k

点赞数 9

分类专栏： vue 微信小程序文章标签：微信小程序 notepad++ 小程序

于 2023-08-02 14:19:56 首次发布

本文链接：https://blog.csdn.net/weixin_74535649/article/details/132061336

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

微信小程序

5 篇文章 0 订阅

订阅专栏

当设置swiper圆角时，会出现先直角后圆角

解决方式：
(1).需要在swiper外面的盒子设置 overflow: hidden;
(2).在swiper上设置
   ovewflow:hidden;
   border-radius:10rpx;
   transform: translateY(0);
(3).给图片设置圆角
border-radius:10rpx;

  <view class="swiper_content">
                <swiper autoplay interval="2000" circular indicator-dots indicator-color="rgba(44,44,44,.3)" indicator-active-color="rgba(255,128,64,.9)" style='ovewflow:hidden;border-radius:10rpx;transform: translateY(0);'>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/01.png"></image>
                    </swiper-item>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/02.png"></image>
                    </swiper-item>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/03.png"></image>
                    </swiper-item>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/04.png"></image>
                    </swiper-item>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/05.png"></image>
                    </swiper-item>
                    <swiper-item class="" item-id="">
                        <image class="" src="../../images/swiper/06.png"></image>
                    </swiper-item>
                </swiper>
            </view>

  .swiper_content {
            width: 710rpx;
            height: 250rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 20rpx;
            border-radius: 10rpx !important;
            border-radius: 30rpx;
            overflow: hidden;
            swiper {
                width: 100% !important;
                height: 250rpx !important;
                border-radius: 10rpx !important;
            }

            swiper-item {
                width: 100%;
                border-radius: 10rpx !important;
                position: relative;
            }

            image {
                width: 100%;
                height: 250rpx;
                border-radius: 10rpx;


            }
        }