Maison > Article > interface Web > Le plug-in vue implémente un graphique carrousel sur un terminal mobile
Cette fois, je vais vous présenter le plug-in vue pour réaliser le graphique carrousel mobile. Quelles sont les précautions pour le plug-in vue pour réaliser le graphique carrousel mobile. , jetons un coup d'oeil.
Effectivement, il existe encore beaucoup de plug-ins basés sur Vue, j'ai donc recherché vue-awesome-swiper, qui est un plug-in de graphique carrousel développé sur la base de Vue et Swiper, mais quand j'ai avez regardé l'API, elle a toujours signalé des avertissements... ...ou faites vos propres recherches...
Cet article s'applique uniquement à l'utilisation dans l'introduction et l'utilisation de Vue CDN. dernier lien API de l'article.
Installer
npm
npm install vue-awesome-swiper --save
Présenter
Introduction globale
Introduction dans le fichier d'entréemain.js
import VueAwesomeSwiper from 'vue-awesome-swiper' // require stylesimport 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
Introduction locale
Le carrousel est nécessaire en cas de besoin Introduire
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'
dans la page de vue de la figure et ajoutez swiper
components:{ swiper, swiperSlide }
dans les composantsen utilisant
Structure HTML
<swiper :options="swiperOption"> <swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide> <p class="swiper-pagination" slot="pagination"></p></swiper>
données :
export default { data () { return { swiperOption: { autoplay:true,//自动切换 pagination: { el: '.swiper-pagination'//分页器 } }, swiperSlides: [1, 2, 3] } } }
Ce qui précède peut obtenir l'effet carrousel de base pour d'autres effets. , veuillez vous référer à l'API officielle de Swiper et définir le paramètre attribut dans swiperOption.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Utilisation de la mise en page flexible
Modification du style de la case à cocher de saisie
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!