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="width: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 {
    width: 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 {
    width: 100% !important;
    height: 100% !important;
  }

  .swiper-container-autoheight,
  .swiper-container-autoheight .swiper-slide {
    height: 100%;
    font-size: 0;
    position: relative;
  }