问题复现:
先贴一下我的布局代码,为防止其他干扰,代码只含有必要内容。
<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;”样式后的效果。