安卓手机!用swiper做轮播效果,两张图片之间会有一个像素的空白
只要为swiper的父元素设置margin padding,或者用flex布局,让其居中,两个图片之间都会一个像素的空隙!
解决办法是,想让banner处于什么样的位置!就绝对定位就好了!
为什么会造成这样的原因没有查明白!
如下:
如果想要为swiper轮播的图片添加圆角时,一般都会直接给swpier上直接加border-radius,但是会发现不起作用,
解决方案是,在上面在添加一个属性:
transform: translateY(0);
<view class="centerBody">
<swiper
class="swiper_container"
@change="swiperChange"
:current="currentIndex"
:autoplay="false"
:interval="3000"
:duration="100"
:circular="list.length>1?true:false"
:indicator-dots="false"
>
<swiper-item
class="item"
v-for="(item, index) in list"
:key="index"
>
<view
class="img_container"
style=" height:164rpx"
@click="itemClick(index, item)"
>
<img
class="swiper_img"
:src="item.elememtIcon"
mode="widthFix"
alt
role="img"
:aria-label="item.elementTitle"
/>
</view>
</swiper-item>
</swiper>
</view>
.centerBody {
position: relative;
margin-top: 24rpx;
}
.container-view {
position: absolute;
width: 702rpx;
left: 50%;
transform: translateX(-50%);
margin-bottom: 161rpx;
}

浙公网安备 33010602011771号