请问好人们，小程序swiper设了overflow:hidden和border-radius:10rpx,在ios手机上没效果，解决方案

再加上

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0, 0, 0);

亲测有效

项目中，轮播图原本的直角觉得不够美观，于是设置了圆角border-radius: 10rpx;，但是会出现一个bug就是，滑动过程中先显示的直角，等滑动一整张之后才会变成圆角。

这个问题真的是苦恼了半天呢，因为在父级上设置了overflow: hidden;然而在iOS真机上并不买账~

1、首先在轮播图的最外层，先设置好圆角，也就是top_img这个view的样式

2、然后在swiper样式上设置ovewflow:hidden;border-radius:10rpx;

很多百度出来的结果都是这样解决的，我不明白，难道只有我的iOS真机上不好用吗？

加上这关键一句之后，问题才得以解决！赶快记录下来，希望可以帮助到跟我遇到相同问题的伙伴们

原wxss样式

slideshow {

  width: 96%;

  border-radius: 25rpx;

  margin: 20rpx auto;

}

效果如下：

如图，轮播图是矩形，没有理想中的圆角。

修改如下：

slideshow {

  width: 96%;

  border-radius: 50rpx;

  overflow: hidden;

  margin: 20rpx auto;

}

效果如下：

如图所示，轮播图为圆角矩形。

重点在：overflow: hidden;

swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。

配置 circular="true" 属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

1、swiper-item的key一定要设置，并且用 index 。

2、如果只有一张情况，不想让它来回滚动。可以设置 circular ，但是 circular 无法直接动态设置，我们可以使用 computed 来设置

>

2019/2/22

indexwxml文件

indexjs文件

数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致swiper不显示的问题。

解决：

indexwxml 中在swiper中绑定current

indexjs 中增加current

以上就是关于请问好人们，小程序swiper设了overflow:hidden和border-radius:10rpx,在ios手机上没效果，解决方案全部的内容，包括:请问好人们，小程序swiper设了overflow:hidden和border-radius:10rpx,在ios手机上没效果，解决方案、微信小程序-swiper轮播图圆角滑动会先直角再圆角的解决办法、小程序swiper圆角实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！