uniapp中轮播图设置圆角下半部分不生效问题

问题：

uniapp 中轮播图设置圆角下半部分不生效问题，如图所示：

代码：

<template>
	<uni-swiper-dot 
		class="uni-swiper-dot-box" 
		@clickItem="clickItem" 
		:info="info" 
		:current="current" 
		:mode="mode"
		:dots-styles="dotsStyles" 
		field="content">
		<swiper 
			class="swiper-box" 
			@change="change" 
			:current="swiperDotIndex">
			<swiper-item v-for="(item, index) in info" :key="index">
				<view class="swiper-item">
					<image class="rotograph-image" :src="item.path"/>
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>


<style lang="scss">
.swiper-item{
	text-align: center;
	
	.rotograph-image{
		border-radius: 50upx;
		width: 95%;
		height: 300upx;
	}
}
</style>

原因： 给图片标签设置的高度大于 uni-swiper-dot 组件高度，所以图片下面一部分被隐藏

解决方法：

将 swiper 标签和 image 标签的高度设置为 100%

<style lang="scss">
.swiper-item{
	text-align: center;
	height: 100%;
	
	.rotograph-image{
		border-radius: 50upx;
		width: 95%;
		height: 100%;
	}
}
</style>

效果：

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者