zoukankan      html  css  js  c++  java
  • vue——swiper异步加载轮播图,并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826

    效果:

    此处安装省略

    vue:

    <div class="banner" v-show="isShowSlide">
            <div class="swiper-banner">
              <div class="swiper-wrapper">
                   <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
                        <img src="images/img_loading.jpg"
                    :data-src="item.imgpath" class="swiper-lazy" style="100%;height:100%">
                   </div>
              </div>
               <div class="swiper-pagination" v-if="swiperList.length>1">
                     <span v-for="(item,index) in swiperList"></span>
              </div>
            </div>
          </div>
    getImgs: function() { //created中调用
            let _this = this;
            _this.axios.get('请求链接').then(function(res) {
              if (res.status === 200 && res.data.result === "0") {
                const data = res.data.message.list;
                for (let i in data) {
                  _this.swiperList.push(data[i]);
                }
                _this.swiperLength = _this.swiperList.length;
    
                _this.$nextTick(function() {
                  if (_this.swiperLength > 0) {
                    _this.isShowSlide = true;
                    if (_this.swiperLength == 1) {
                      _this.isAutoplay = 0;
                      _this.isLoop = false;
                    } else {
                      _this.isAutoplay = 3000;
                      _this.isLoop = true;
                    }
                    _this.mySwiper = new Swiper(".swiper-banner", {
                      autoplay: _this.isAutoplay,
                      loop: _this.isLoop,
                      autoplayDisableOnInteraction: false,
                      preventLinksPropagation: false,
                      lazyLoading: true, //懒加载开启
                      pagination: '.swiper-pagination',
                      observer: true, //修改swiper自己或子元素时,自动初始化swiper
                      observeParents: true, //修改swiper的父元素时,自动初始化swiper
                    })
                  } else {
                    _this.isShowSlide = false;
                  }
                })
              } else {   
                  _this.isShowSlide = false;            
              }
            }).catch(function(err) {
              console.log(err);
            })
          },
      .swiper-wrapper {
        font-size: 0;
      }
    
      .swiper-pagination {
         100%;
        height: .2rem;
        text-align: center;
        position: absolute;
        bottom: 0 !important;
        line-height: .2rem;
        box-sizing: border-box;
        padding: 0 .3rem;
        font-size: 0;
      }
    
      >>>.swiper-pagination-bullet-active {
        background-color: #ff7035 !important;
        opacity: 1;
      }
    
      .swiper-pagination-bullet {
        background-color: rgba(255, 255, 255, 1);
        opacity: 1;
      }
    
      .swiper-slide {
        height: 1.5rem !important;
        line-height: 1.5rem !important;
      }
    
      .swiper-wrapper {
         100% !important;
        height: 100% !important;
      }
    
      .swiper-container-autoheight,
      .swiper-container-autoheight .swiper-slide {
        height: 100%;
        font-size: 0;
        position: relative;
      }
  • 相关阅读:
    python二维数组的创建
    使用js制作 下拉选择日期列表 (即日期选择器)
    onblur事件和onfocus事件失效
    jQuery中$("input")与$(":input")的区别
    jQuery之绑定焦点事件(焦点事件失效)
    django.db.utils.OperationalError: (2003, "Can't connect to MySQL server on ‘127.0.0.1’)
    UCI机器学习数据库
    Cannot open the disk 'F:centos64-finalCentOS 64-bitCentOS 64-bit.vmdk' orone of the snapshot disk
    mr本地运行的几种模式
    序列化为XML
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/11649860.html
Copyright © 2011-2022 走看看