手机端swiper快速滑动会有白屏
在手机端做轮播图的效果!用的swiper,但是发现一个问题,快速滑动的时候会出现白屏的效果,解决办法如下:
最主要的就是在swiper-item下的子元素在行内样式中设置高度!(这个是用uni写的!)
具体是什么原因造成的还没有查明原因
<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>
.container-view {
position: absolute;
width: 702rpx;
left: 50%;
transform: translateX(-50%);
margin-bottom: 161rpx;
}
.container {
width: 702rpx;
height: 164rpx;
position: relative;
.swiper_container {
border-radius: 16rpx;
transform: translateY(0);
.item {
.img_container {
display: flex;
flex-direction: row;
position: relative;
width: 702rpx;
height: 164rpx !important;
}
.swiper_img {
flex-grow: 1;
display: flex;
height: 164rpx !important;
}
}
}
}

浙公网安备 33010602011771号