微信小程序设置swiper圆角在ios上失效解决

	今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug。
	
	下面是两种解决方案:
	第一种:-webkit-backface-visibility: hidden;
             -webkit-transform: translate3d(0, 0, 0);  
		<view class="swiper-container">
					<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500"
						:circular="true">
						<swiper-item v-for="(item,index) in banners" :key="item.id">
							<view class="swiper-item">
								<image :src="item.picUrl" mode="aspectFill" class="imgs" style="border-radius: 40rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			//轮播图区
				.swiper-container {
    
    
					margin-top: 26rpx;
					position:relative;
					.swiper {
    
    
						@include radius(40rpx);
						background: #FFF;
						box-shadow:$shadow;
						overflow: hidden;
						height: 468rpx;
						width: 670rpx;
						margin: auto;
						-webkit-backface-visibility: hidden;
						-webkit-transform: translate3d(0, 0, 0);//在圆角元素上加上这个样式
						.swiper-item {
    
    
							width: 100%;
							height: 100%;
							@include radius(40rpx);

							.imgs {
    
    
								width: 100%;
								height: 100%;
								@include radius(40rpx);
								
							}
						}
					}
				}

第二种:border-radius: 20rpx;
transform:translateY(0);

<view class="swiper-container">
					<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500"
						:circular="true">
						<swiper-item v-for="(item,index) in banners" :key="item.id">
							<view class="swiper-item">
								<image :src="item.picUrl" mode="aspectFill" class="imgs" style="border-radius: 40rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
//轮播图区
				.swiper-container {
    
    
					margin-top: 26rpx;
					position:relative;
					.swiper {
    
    
						@include radius(40rpx);
						transform: translateY(0);
						background: #FFF;
						box-shadow:$shadow;
						overflow: hidden;
						height: 468rpx;
						width: 670rpx;
						margin: auto;
						.swiper-item {
    
    
							width: 100%;
							height: 100%;
							@include radius(40rpx);
							transform: translateY(0);
							.imgs {
    
    
								width: 100%;
								height: 100%;
								@include radius(40rpx);
								transform: translateY(0);
							}
						}
					}
				}

以上是小编对微信小程序设置swiper圆角在ios上失效解决方法,有些方法是查询的,如文中有错误的,欢迎大佬留言指正…

还有就是等待官方解决方案…

猜你喜欢

转载自blog.csdn.net/wen15191038073/article/details/126427653
今日推荐