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


  

 

posted @ 2021-02-24 14:50  无忧lv  阅读(661)  评论(0编辑  收藏  举报