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

侠客博园

已于 2022-08-25 14:16:22 修改

阅读量1.7k

点赞数 1

文章标签： ios 微信小程序 javascript

于 2022-08-19 16:53:57 首次发布

本文链接：https://blog.csdn.net/wen15191038073/article/details/126427653

版权

	今天在给轮播图添加圆角的时候，发现在安卓机上是有圆角的，但是在苹果手机上圆角却失效了，后来翻阅了文档发现这是个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);
							}
						}
					}
				}