swiper的item为圆角，在滑动切换的过程中出现直角（保持圆角）的解决方案

问题复现：

先贴一下我的布局代码，为防止其他干扰，代码只含有必要内容。

<template>
	<view>
		<swiper class="swiper-box" :autoplay="true" :circular="true">
			<swiper-item class="swiper-item" v-for="(item, index) in urls" :key="index">
				<image class="swiper-img" :src="item"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

CSS代码如下：注意“border-radius”样式，很多人通常会直接加在image组件上，因为这样可以立现我们所需要的效果。

.swiper-box {
	margin: 30rpx;
}
.swiper-item {
	width: calc(100vw - 60rpx);
	height: calc(50vw - 30rpx);
}
.swiper-img {
	width: 100%;
	height: 100%;
	border-radius: 30rpx;
}

效果如下：

但在滑动切换过程中我们会发现四个角仍是直角，而且衔接处是圆角，对于有强迫症的人来说是无法忍受的！

问题分析：

1.swiper组件本身不存在任何属性能实现我们所需要的效果，所以问题的关键还在于样式。 

2.直角是image划出时内容本身形成的，与image的角无关。

3.改变image在滑动过程中的样式是不太实际的，所以需要从父布局入手。

解决办法：

将“border-radius”剪切到“swiper-box”的样式中，并添加“overflow:hidden;”，从根本上限制父布局的可视区域。

有人做完这一步看到效果或许就认为成功了，有人仍看不到效果。问题在于运行环境。

IOS还需要添加“transform: translateY(0);”，这是由于swiper组件在IOS中的层叠关系与其他环境有所差异的问题。

感兴趣的读者可以加个深色背景去品品，会发现swiper组件的样式其实是正常的，但是组件内的东西就不太听话了，好像浮在外上层似的。

完整代码如下：

.swiper-box {
	margin: 30rpx;
	border-radius: 30rpx;
	overflow: hidden;
	/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
	transform: translateY(0);
}
.swiper-item {
	width: calc(100vw - 60rpx);
	height: calc(50vw - 30rpx);
}
.swiper-img {
	width: 100%;
	height: 100%;
}

最终效果如下：

注意事项：

HBuilderX的内置浏览器无法预览swiper组件添加“border-radius”+“overflow:hidden;”样式后的效果。