手机端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; } } } }