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