애플릿은 단순한 swiper을 달성하기 위해

몇 마디의 사람이 스크린 샷에 말했다,

 

 

 HTML

  <swiper 클래스 = "swiper 블록"이전 마진 = "70rpx"다음 마진 = "70rpx"전류 = "0"자동 재생 = "true"로 bindchange = "swiperChange"원형 = "참"> 
        <블록 WX : 대 = "{{totalData.banners}}"WX : 인덱스 = "{{인덱스}}"WX : 키 = "bannerList"> 
          <swiper 항목 클래스 = "swiper 항목"> 
            <화상 모드 = "aspectFill"SRC = " item.cover {{}} "클래스 ="슬라이드 이미지 {{swiperIndex == 인덱스 '활성'? '}} "/>     
          </ swiper 항목> 
        </ 블록> 
      </ swiper>

CSS

.swiper 블록 { 
  신장 320rpx; 
  폭 : 100 %; 
} 

.swiper 항목 { 
  디스플레이 : 플렉스; 
  굴곡 방향 : 칼럼; 
  정당화 - 내용 : 센터; 
  정렬-항목 : 센터; 
  오버 플로우 : 해제; 
  텍스트 정렬 : 센터; 
} 

.slide 이미지 { 
  신장 230rpx; 
  폭 : 526rpx; 
  경계 반경 : 10rpx; 
  상자 그림자 : 0 픽셀 3px의 RGBA 10px 0 픽셀 (51, 51, 51, 0.3); 
  마진 : 0 RPX 30rpx; 
  Z- 색인 : 1; 
} 

{.active는 
  변환 : 스케일 (1.21); 
  전환 : 모두 0.2 초는 편의성에 0; 
  Z- 색인 : 20; 
}

JS

  swiperChange (E) { 
    이 = CONST; 
    that.setData ({ 
      swiperIndex : e.detail.current, 
    }) 
  },