swiper 輪播圖圓角滑動變會變成直角然后再回到圓角(iOS)

ios中，用 swiper 實現輪播圖 swiper圓角，圖片滑動的時候會先變成直角然后變成圓角（vant）

 

解決方法：

在swiper的父盒子上加overflow:hidden 和 transform: translateY(0);

　　 <div class="my-swipe-box">
      <van-swipe class="my-swipe" @change="swipeChange" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
          <a :href="item.link_url">
            <img :src="item.pic_path" width="100%" height="100%" />
          </a>
        </van-swipe-item>

        <!-- 自定義輪播圖指示器 -->
        <template #indicator v-if="bannerList.length >= 2">
          <div class="custom-indicator">
            <span :class="swipeIndex == 0?'indicator_activity':''"></span>
            <span :class="swipeIndex == 1?'indicator_activity':''"></span>
            <span :class="swipeIndex == 2?'indicator_activity':''" v-show="bannerList.length >= 3"></span>
          </div>
        </template>
      </van-swipe>
    </div>

　import { Swipe, SwipeItem } from "vant";

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      bannerList: [{
        "link_url": "javascript:;",
        "pic_path": "http:\/\/s1.ax1x.com\/2020/06/15\/N9UykQ.jpg",
      }, {
        "link_url": "http:\/\/www.baidu.com",
        "pic_path": "http:\/\/s1.ax1x.com\/2020/06/15\/N9UykQ.jpg",
      }, {
        "link_url": "http:\/\/www.baidu.com",
        "pic_path": "http:\/\/s1.ax1x.com\/2020/06/15\/N9UykQ.jpg",
      }]
    };
  },
  methods: {
    // 自定義輪播指示器
    swipeChange(index) {
      this.swipeIndex = index;
    },
  }
}

.my-swipe-box {
  height: 208px;
  margin-bottom: 9px; border-radius: 6px; overflow: hidden; transform: translateY(0);
}
.van-swipe-item a{
  width: 100%;
  height: 208px;
  display: inline-block; border-radius: 6px; overflow: hidden;
}
.custom-indicator {
  position: absolute;
  bottom: 11px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  left: 45%;
  span {
    display: inline-block;
    width: 5px;
    height: 2px;
    margin: 0 2px;
    background: rgba(0, 0, 0, 0.1);
  }
  .indicator_activity {
    width: 9px !important;
    background: rgba(255, 255, 255, 1) !important;
  }
}

 

參考文章1： https://developers.weixin.qq.com/community/develop/doc/000ac8a67fc5f0333f6741dd756400

 

參考文章2： https://developers.weixin.qq.com/community/develop/doc/00026658428810dd8c07c062556400