uni-app使用swiper设置轮播图的圆角,滑动时变为直角的解决方法

问题显示

代码部分

<view class="ad-swiper">
    <swiper class="swiper" circular autoplay :interval="2000">
      <swiper-item v-for="index in 3" :key="index" class="swiper-item">
        <image
          class="swiper-image"
          src="/static/images/other/101.png"
          mode="scaleToFill"
        />
      </swiper-item>
    </swiper>
  </view>

样式

.ad-swiper {
  height: 150rpx;
  .swiper {
    height: 100%;
    .swiper-item {
      .swiper-image {
        height: 100%;
        border-radius: 20rpx;
        width: 100%;
      }
    }
  }
}

解决办法

在样式上面修改即可, 主要是在swiper 组件上面设置overflow:hidden
这个方法在微信小程序也可以

.ad-swiper {
  height: 150rpx;
  .swiper {
    height: 100%;
    border-radius: 20rpx;
    overflow: hidden; // 这是关键代码, 在整个 swiper 盒子上设置隐藏
    .swiper-item {
      .swiper-image {
        height: 100%;
        width: 100%;
      }
    }
  }
}

解决之后的效果