도 비동기로드 회전 목마 swiper VUE 및 지연로드

:에서 처리 https://blog.csdn.net/weixin_38304202/article/details/78282826

 

효과 :

 

설치는 생략한다

 

보기 :

<DIV 클래스 = "배너"V-쇼 = "isShowSlide"> 
        <DIV 클래스 = "swiper 배너"> 
          <DIV 클래스 = "swiper-래퍼"> 
               <DIV 클래스 = "swiper 슬라이드"V- 에 대한 = "( 항목 swiperList에서, 인덱스) "키 ="인덱스 "> 
                    <IMG SRC ="이미지 // img_loading.jpg " 
                : 데이터 -src ="item.imgpath "클래스 ="swiper - 게으른 "스타일 ="너비 : 100 % , 신장 100 % "> 
               </ div> 
          </ div> 
           <div 클래스 ="swiper - 페이징 "V- 경우 ="swiperList.length> 1 "> 
                 <스팬 V- 용 ="swiperList에서 (항목, 인덱스) "> </ SPAN>
          </ DIV> 
        </ DIV> 
      </ DIV>

getImgs : 함수 () {// 생성은中调用
        _this하자 = 이 ; 
        _this.axios.get ( '请求链接') 그 때는 ( 함수 (해상도) {
           경우 (res.status의 === 200 && res.data.result === "0" ) { 
            CONST 데이터 = res.data.message .list;
             위해 (ⅰ하자 에 데이터) { 
              _this.swiperList.push (데이터 [I]) 
            } 
            _this.swiperLength = _this.swiperList.length] 

            . _this $ nextTick ( 함수 () {
               만약(_this.swiperLength> 0 ) { 
                _this.isShowSlide = 참 ;
                경우 (_this.swiperLength == 1 ) { 
                  _this.isAutoplay = 0 ; 
                  _this.isLoop = 거짓 ; 
                } 다른 { 
                  _this.isAutoplay = 3000 ; 
                  _this.isLoop = 진정한 ; 
                } 
                _this.mySwiper = 새로운 Swiper ( "swiper 배너." , { 
                  자동 재생 : _this.isAutoplay, 
                  루프 : _this.isLoop, 
                  autoplayDisableOnInteraction : false로 , 
                  preventLinksPropagation : false로 , 
                  LazyLoading : true로 , // 개방 지연로드 
                  매김 '페이지 매김-.swiper' , 
                  관찰자 : true로 , // Swiper 또는 하위 요소, Swiper 자동 초기화 수정 
                  observeParents을 : true로 , // Swiper는 자동으로 Swiper 초기화 부모 요소 수정 
                }) 
              } 다른 { 
                _this.isShowSlide = false로를;  
              }
            }) 
          } 다른 {    
              _this.isShowSlide = 거짓 ;            
          } 
        }). 캐치 ( 함수 (ERR) { 
          CONSOLE.LOG (ERR) 
        }) 
      },

  .swiper- 래퍼 { 
    폰트 - 크기 : 0 ; 
  } 

  .swiper - 페이징 { 
    폭 : 100 % ; 
    높이 : .2rem; 
    텍스트 - 정렬 : 센터; 
    위치 : 절대; 
    바닥 : 0! 중대한; 
    라인 - 높이 : .2rem; 
    상자 -sizing : 테두리 - 상자; 
    패딩 : 0 .3rem; 
    폰트 - 크기 : 0 ; 
  }

   >>> swiper-매김-bullet-. 활성 { 
    배경 색 : #의 ff7035! 중대한;
    불투명:1 ; 
  } 

  .swiper -pagination- 총알 { 
    배경 색 : RGBA (255, 255, 255, 1 ); 
    불투명도 : 1 ; 
  } 

  .swiper - 슬라이드 { 
    높이 : 1.5rem! 중대한; 
    라인 -height : 1.5rem! 중대한; 
  } 

  .swiper - 래퍼 { 
    폭 : 100 %! 중대한; 
    높이 : 100 %! 중대한; 
  }이 

  .swiper -container- autoHeight를, 
  .swiper -container-autoHeight를 .swiper- 슬라이드 { 
    신장 : 100 % ; 
    폰트 - 크기 : 0 ; 
    위치 : 상대; 
  }