vue.js 윤 방 구성 요소 vue-awesome-swiper 기반 윤 방 도 구현

일반적으로 모 바 일 엔 드 윤 방 도 를 만 들 때 가장 많이 사용 되 는 것 은 Swiper 플러그 인 이 고 vue.js 에 도 윤 방 구성 요소 vue-awesome-swiper 가 있 습 니 다.용법 은 swiper 와 비슷 합 니 다.
1.vie-awesome-swiper 설치

nam install vue-awesome-swiper --save-dev

2.vie-awesome-swiper 구성 요 소 를 참조 합 니 다.여 기 는 vie-cli 로 만 든 프로젝트 입 니 다.main.js:

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //        

3.Home.vue 에서 사용

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
  <!--      -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!--            -->
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
  export default{
    data(){
      return {
        swiperOption: {
          //         （ Swiper  ） 
          notNextTick: true,
          autoplay: 3000,
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          scrollbar:'.swiper-scrollbar',
          mousewheelControl : true,
          observeParents:true,
          onTransitionStart(swiper){
           console.log(swiper)
          }
      }
    }
  },
  computed: {
    swiper() {
     return this.$refs.mySwiperA.swiper
    }
  },
  mounted() {
    console.log("         ");
    this.swiper.slideTo(3, 1000, false)
   }
}
</script>

위 에서 말 한 것 은 편집장 이 소개 한 vue.js 윤 방 구성 요소 vue-awesome-swiper 를 바탕 으로 윤 방 도 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!