question:
The bottom half of the rounded corner setting in uniapp does not take effect, as shown in the figure:
code:
<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>
Reason: The height set for the image tag is greater than the height of the uni-swiper-dot component, so the lower part of the image is hidden
Solution:
Set the height of swiper tag and image tag to 100%
<style lang="scss">
.swiper-item{
text-align: center;
height: 100%;
.rotograph-image{
border-radius: 50upx;
width: 95%;
height: 100%;
}
}
</style>
Effect: