vue에서 swiper 플러그인을 가져오는 방법은 무엇입니까?

이번 글에서는 vue 프로젝트에서 swiper 플러그인을 import하는 방법을 주로 소개하고 참고하겠습니다.

버전 선택

swiper는 일반적으로 사용되는 플러그인으로, 이제 4세대인 swiper4까지 반복되었습니다.

일반적으로 사용되는 버전은 swiper3과 swiper4입니다. 저는 swiper3을 선택했습니다.

Install

swiper3의 최신 버전 3.4.2를 설치하세요:

npm i swiper@3.4.2 -S

여기에 노드 패키지의 모든 버전 번호를 보는 방법에 대한 약간의 지식이 있습니다:

npm view 包名 versions

Component writing

공식적인 방법 Swiper를 사용하면 4 개의 프로세스로 나뉩니다. Plug-in

1. html Contentswiper initialize stwiper에 대한 크기를 정의하십시오. 또한이 프로세스를 따라 구성 요소를 작성하십시오.

2. 플러그인 로드

   import Swiper from 'swiper';
   import 'swiper/dist/css/swiper.min.css';

3. HTML 콘텐츠

   <template>
     <p class="swiper-container">
       <p class="swiper-wrapper">
         <p class="swiper-slide">Slide 1</p>
         <p class="swiper-slide">Slide 2</p>
         <p class="swiper-slide">Slide 3</p>
       </p>
       <!-- 如果需要分页器 -->
       <p class="swiper-pagination"></p>
       <!-- 如果需要导航按钮 -->
       <p class="swiper-button-prev"></p>
       <p class="swiper-button-next"></p>
       <!-- 如果需要滚动条 -->
       <p class="swiper-scrollbar"></p>
     </p>
   </template>

4. Swiper 크기 정의

   .swiper-container {
     width: 600px;
     height: 300px;
   }

Swiper 초기화

Swiper는 DOM 렌더링이 완료될 때까지 초기화할 수 없기 때문에 초기 화를 넣어야 한다 vue 수명 주기 후크 기능 탑재:

mounted(): {
  /* eslint-disable no-new */
  new Swiper('.swiper-container', {})
}

/* eslint-disable no-new */ eslint 코드 감지를 활성화하는 프로젝트에서 사용할 수 있습니다. eslint를 사용할 수 없는 경우 다음 코드를 사용하세요.

mounted(): {
  var mySwiper = new Swiper('.swiper-container', {})
}

Complete

위의 코드를 결합하면

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

<script>
import Swiper from &amp;#39;swiper&amp;#39;;
import &amp;#39;swiper/dist/css/swiper.min.css&amp;#39;;
export default {
  mounted(): {
    var mySwiper = new Swiper(&#39;.swiper-container&#39;, {})
  }
}
</script>

실행해 보면 캐러셀 효과를 얻을 수 있는 것을 확인할 수 있습니다. 그러나 지금까지는 캐러셀 효과만 달성되었으며 데이터는 렌더링되지 않았습니다.

데이터 렌더링

실제 프로젝트에서는 배너 그래픽 효과를 얻기 위해 스와이퍼 플러그인을 자주 사용합니다(시나 모바일 버전):

데이터 획득

저는 ajax를 자주 사용합니다 vue 프로젝트의 플러그인 Axios는 예를 들어:

axios
 .get('/user?ID=12345')
 .then(function (response) {
  this.imgList = response;
 })
 .catch(function (error) {
  console.log(error);
 });

는 데이터를 얻기 위한 데이터 구조를 다음과 같이 정의합니다.

[
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif"
]

List 렌더링

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide" v-for="item in imgList" :style="{backgroundImage: &#39;url(&#39; + item + &#39;)&#39;}"></p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

<style>
.swiper-slide {
  width: 100%;
  height: 400px;
}
<style>

지금까지 데이터 렌더링이 완료되었지만 실제 효과를 보면 다음과 같습니다. 배너는 캐러셀의 효과를 얻을 수 없습니다. 여기에서는 이미지만 렌더링되고 캐러셀 이미지는 렌더링되고 초기화되지 않았습니다. Life Cycle이 탑재되면 초기화가 완료되었기 때문입니다.

초기화

따라서 데이터를 얻고 DOM을 업데이트한 후에는 Swiper를 다시 초기화해야 합니다.

axios
 .get('/user?ID=12345')
 .then(function (response) {
  // 获取数据更新
  this.imgList = response;
  // DOM还没有更新
  this.$nextTick(() => {
    // DOM更新了
    // swiper重新初始化
    /* eslint-disable no-new */
    new Swiper('.swiper-container', {})
  })
 })
 .catch(function (error) {
  console.log(error);
 });

이 시점에서 캐러셀 이미지의 효과가 구현됩니다.

요약

swiper는 흔히 사용되는 플러그인이지만, vue 프로젝트에 swiper를 가져올 때 많은 문제가 발생합니다. 가장 큰 문제는 다양한 js 플러그인을 효과적으로 사용할 수 있도록 vue의 수명주기를 이해하는 것입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)

파일 드래그를 제어하고 js에서 드래그 콘텐츠 기능을 얻는 방법

js의 장식 디자인 패턴에 대한 자세한 해석

위 내용은 vue에서 swiper 플러그인을 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!