zoukankan      html  css  js  c++  java
  • 手机端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;
       702rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 161rpx;
    }
    .container {
       702rpx;
      height: 164rpx;
      position: relative;
      .swiper_container {
        border-radius: 16rpx;
        transform: translateY(0);
        .item {
          .img_container {
            display: flex;
            flex-direction: row;
            position: relative;
             702rpx;
            height: 164rpx !important;
          }
          .swiper_img {
            flex-grow: 1;
            display: flex;
            height: 164rpx !important;
          }
        }
      }
    }
    
    
    

      

  • 相关阅读:
    忘记线上MySQL密码:
    Auth认证
    swoole定时
    hashMap,hashTable,concurrentHashmap的区别
    JSP中URL路径获取问题
    #Spring代理的简单例子#
    #动态代理#
    #类加载机制#
    #算法#二分查找和插入(start end交叉的地方)
    #tomcat#生成的jsp转换问题
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/14441437.html
Copyright © 2011-2022 走看看