Comment importer le plugin swiper dans vue ?

Cet article présente principalement la méthode d'importation du plug-in swiper dans le projet vue. Je vais maintenant le partager avec vous et vous donner une référence.

Sélection de version

Swiper est un plug-in couramment utilisé, et il a maintenant été itéré jusqu'à la quatrième génération : swiper4.

Les versions couramment utilisées sont swiper3 et swiper4. J'ai choisi swiper3.

Installation

Installez la dernière version 3.4.2 de swiper3 :

npm i swiper@3.4.2 -S

Voici un peu de connaissances, vérifiez tous les numéros de version du Méthode du package node :

npm view 包名 versions

Écriture des composants

La méthode officielle d'utilisation de swiper est divisée en 4 processus :

1. Chargement du plug-in

2. Contenu HTML

3. Définir une taille pour Swiper

4. Initialiser Swiper

Je suis également ce processus pour écrire des composants :

Charger le plug-in

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

Contenu 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>

Définir une taille pour Swiper

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

Initialiser Swiper

Parce que Swiper ne peut pas être initialisé tant que le rendu dom n'est pas terminé, il doit l'être. L'initialisation est placée dans la fonction hook du cycle de vie montée de vue :

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

/* eslint-disable no-new */ dans le code ci-dessus est le projet qui permet la détection du code eslint et peut être utilisé, si eslint n'est pas utilisé. Vous pouvez utiliser le code suivant :

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

Complet

Combinez les codes ci-dessus :

<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>

Cours, vous pouvez voir que la roue peut être réalisée L'effet de diffusion d'images. Mais jusqu’à présent, seul l’effet carrousel a été obtenu et les données n’ont pas été restituées.

Rendu des données

Dans les projets réels, le plug-in swiper est souvent utilisé pour obtenir l'effet de graphiques de bannière (version mobile Sina) :

Acquisition de données

J'utilise le plug-in ajax axios couramment utilisé dans les projets vue à titre d'exemple :

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

La structure de données qui obtiendra les données est spécifiée Pour :

[
  "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"
]

Rendu de liste

<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>

Jusqu'à présent, le rendu des données est terminé, mais en regardant l'effet réel, il semble que la bannière ne puisse pas obtenir l'effet de l'image carrousel. L'image est uniquement rendue ici, mais l'image du carrousel est rendue et n'a pas été initialisée. Parce que l'initialisation est terminée lorsque le cycle de vie est monté.

Initialisation

Ainsi, une fois les données obtenues et le DOM mis à jour, le swiper doit être réinitialisé.

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);
 });

À ce stade, l'effet de l'image carrousel est réalisé.

Résumé

Swiper est un plug-in couramment utilisé, mais de nombreux problèmes sont rencontrés lors de l'importation de swiper dans un projet vue. Le principal problème est de comprendre le cycle de vie de vue afin de pouvoir utiliser efficacement les différents plug-ins js.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utiliser Vue pour implémenter les principes sous-jacents (tutoriel détaillé)

Comment faire glisser et récupérer des fichiers de contrôle dans js Fonction glisser-déposer de contenu

Interprétation détaillée du motif de conception décorative en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!