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!