vue에서 swiper carousel 플러그인을 사용하여 캐러셀 이미지를 구현하는 방법(코드 분석)

이 글의 내용은 Vue에서 캐러셀 이미지를 구현하는 방법(코드 분석)에 대한 내용입니다. 필요한 친구들이 참고하면 좋겠습니다. 당신에게 도움이 됩니다.

때로는 vue에서 캐러셀 컴포넌트를 사용해야 할 때가 있습니다. vue 컴포넌트에 타사 컴포넌트가 도입된 경우 통합 설치 패키지 관리를 위해 npm을 통해 설치하는 것이 가장 좋습니다.

설명: 이 문서에서는 vue.2x 버전을 사용합니다.

npm을 통해 플러그인 설치:

 npm install swiper --save-dev

필요한 구성 요소에 도입 #🎜🎜 # swiper swiper를 사용하려면 swiper의 초기화가 mount에 배치됩니다. #Running effect:

다음으로 위의 코드를 재구성합니다. CSS 선택기를 Swiper의 기초로 사용하여 페이지에 요소를 배치합니다. 그렇다면 한 페이지에 두 개의 .slider-container가 동시에 있으면 이 구성 요소가 엉망이 됩니다! 코드를 리팩터링하려면 낮은 결합 개발 접근 방식을 준수해야 합니다.

Vue에서 제공하는 보다 정확한 지정 방법을 사용하여 요소에 참조 친숙성을 추가한 다음 코드의 this.$refs를 통해 참조할 수 있습니다.

Vue.js2.0 이후의 숫자입니다. ref 태그는 Vue.js 1.x의 v-ref 작성을 대체합니다

이미지의 동적 바인딩으로 변경하는 경우 다음을 참조하세요. vue-cil 및 webpack의 로컬 정적 이미지 경로 문제 해결

I 여기서는 정적 이미지를 사용합니다. 리소스 파일은 정적 디렉터리로 이동됩니다.

리팩토링된 코드는 다음과 같습니다.

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
      <div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!--<div class="swiper-button-prev"></div>-->
    <!--<div class="swiper-button-next"></div>-->
    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
  </div>
</template>
<script>
  import &#39;swiper/dist/css/swiper.css&#39;
  import Swiper from &#39;swiper&#39;;
  export default {
    name: "Slider",
    mounted(){
      new Swiper (&#39;.swiper-container&#39;, {
        loop: true,
        // 如果需要分页器
        pagination: &#39;.swiper-pagination&#39;,
        // 如果需要前进后退按钮
        nextButton: &#39;.swiper-button-next&#39;,
        prevButton: &#39;.swiper-button-prev&#39;,
        // 如果需要滚动条
        scrollbar: &#39;.swiper-scrollbar&#39;,
      })
    }
    }
</script>

<style scoped>
  .swiper-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .swiper-wrapper {
    height: 200px;
  }

  .swiper-slide img {
    max-width: 100%;
  }

  .swiper-slide {
    text-align: center;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

여기서 구성 요소는 완전히 독립적이지 않습니다. 실제로 데이터 정의에서는 이 데이터를 매개변수로 전달할 수 있습니다. 즉, 구성요소 간 데이터 전송이 가능합니다.

Vue 페이지 점프 및 매개변수 전달

라우팅을 통해 매개변수 전달 및 router/index.js에서 경로 정의

<template>
  <div>
  <div class="swiper-container" ref="slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="slide in slides">
        <router-link :to="{name:&#39;BookDetail&#39;,params:{id:slide.id}}">
        <img :src="slide.img_url"/>
        </router-link>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import &#39;swiper/dist/css/swiper.css&#39;
  import Swiper from &#39;swiper&#39;
  export default {
    name: "Slider",
    data(){
      return{
        slides:[{id:1,img_url:&#39;./static/sliders/t1.svg&#39;},{id:2,img_url:&#39;./static/sliders/t2.svg&#39;}]
      }
    },
    mounted(){
      new Swiper (this.$refs.slider, {
        loop: true,
        // 如果需要分页器
        pagination: &#39;.swiper-pagination&#39;,
        // 如果需要前进后退按钮
        nextButton: &#39;.swiper-button-next&#39;,
        prevButton: &#39;.swiper-button-prev&#39;,
        // 如果需要滚动条
        scrollbar: &#39;.swiper-scrollbar&#39;,
      })
    }
    }
</script>

# 🎜🎜#

전달해야 하는 라우팅 매개변수는 이전 캐러셀 구성요소에서 정의되었습니다

export default new Router({
  routes: [
    {
      name:'BookDetail',
      path:'/books/:id',
      component: BookDetail
    }
  ]
})

#🎜 🎜# 매개변수 수신 인터페이스 BookDetail.vue

 <router-link :to="{name:&#39;BookDetail&#39;,params:{id:slide.id}}">
        <img :src="slide.img_url"/>
        </router-link>

매개변수를 너무 많이 전달하는 경우 이 방법은 확실히 불편하므로 다음을 사용할 수 있습니다. vuex 또는 구성 요소 데이터 전송.

컴포넌트 값 전송에 대한 자세한 내용은 다음을 참조하세요. Vue 컴포넌트 값 전송

Vue-cli npm 실행 빌드 프로덕션 환경 패키징 정보, 문제는 로컬에서 열 수 없습니다#🎜 🎜##🎜 🎜#실행할 때마다: hs.

관련 권장 사항:

jQuery 적응형 캐러셀 플러그인 Swiper 사용 예

# 🎜 🎜#swiper 구성 요소를 사용하여 캐러셀 광고 효과 달성

Vue는 이미지 캐러셀 효과 코드 공유를 위해 Swiper를 캡슐화합니다

위 내용은 vue에서 swiper carousel 플러그인을 사용하여 캐러셀 이미지를 구현하는 방법(코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!