Questions sur le plug-in vue-awesome-swiper-js tutoriel-php.cn

Questions sur le plug-in vue-awesome-swiper

亚连

Libérer： 2018-06-09 15:32:43

original

2030 Les gens l'ont consulté

Cet article présente principalement le problème de combler les pièges du nouveau plug-in vue-awesome-swiper introduit dans vue. Maintenant, je le partage avec vous et lui donne une référence.

Cet article présente la nouvelle version de vue-awesome-swiper et la partage avec tout le monde. Les détails sont les suivants :

Questions

Pourquoi la pagination de mon composant vue-awesome-swiper n'affiche pas le problème ?
Pourquoi mon vue-awesome-swiper ne joue-t-il pas automatiquement ?
Pourquoi mon vue-awesome-swiper ne fonctionne-t-il pas ?

Utilisez

pour introduire (les étapes précédentes sont les mêmes que d'habitude)

npm install vue-awesome-swiper --save

Copier après la connexion

Introduire dans principal, js (Global) :

import VueAwesomeSwiper from &#39;vue-awesome-swiper&#39; 
Vue.use(VueAwesomeSwiper) 
import &#39;swiper/dist/css/swiper.css&#39;

Copier après la connexion

(Le problème de non-affichage du CSS peut être ici)

Introduit dans le composant :

import &#39;swiper/dist/css/swiper.css&#39;  //在全局没引入，这里记得要！
import { swiper, swiperSlide } from &#39;vue-awesome-swiper&#39;

export default {
 components: {
  swiper,
  swiperSlide
 }
}

Copier après la connexion

Configuration

modèle ：

<swiper :options="swiperOption">
<swiper-slide>I&#39;m Slide 1</swiper-slide>
<swiper-slide>I&#39;m Slide 2</swiper-slide>
<swiper-slide>I&#39;m Slide 3</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p>
 </swiper>

Copier après la connexion

script :

export default {
data() {
 return {
  swiperOption: {
   // 所有的参数同 swiper 官方 api 参数一样
   // 
  }
 }
},
...
 }

Copier après la connexion

L'accent est mis sur les modifications apportées à swiperOption. Voyez la différence dans l'image ci-dessous :

Il s'avère que la pagination et la lecture automatique doivent être configurées comme ceci !

Il s'est avéré que je m'étais trompé à ces deux endroits, ce qui faisait que la pagination ne s'affichait pas et que les images ne tournaient pas.

Avant erreur :

Après correction :

Résumé

Le site officiel de vue-awesome-swiper a en fait publié les instructions il y a longtemps, mais quand j'ai vu qu'elles étaient toutes en anglais, je n'ai plus eu envie de lire. Plus tard, j'ai découvert que c'était en fait très facile à comprendre. J'ai appris ma leçon et lu la documentation moi-même au lieu de chercher des démos à copier.

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