Das Vue-Plug-in implementiert ein Karusselldiagramm auf einem mobilen Endgerät

Dieses Mal bringe ich Ihnen das Vue-Plug-In zum Realisieren des mobilen Karussell-Diagramms. Was sind die Vorsichtsmaßnahmen für das Vue-Plug-In zum Realisieren des mobilen Karussell-Diagramms? , lass uns einen Blick darauf werfen.

Natürlich gibt es immer noch viele Plug-ins, die auf Vue basieren, also habe ich nach vue-awesome-swiper gesucht, einem Karusselldiagramm-Plug-in, das auf Basis von Vue und Swiper entwickelt wurde, aber als ich Schauen Sie sich die geschriebene API an, sie hat immer eine Warnung gemeldet... ...oder recherchieren Sie selbst...

Dieser Artikel bezieht sich nur auf die Verwendung in der Vue-CDN-Einführung und -Nutzung der letzte API-Link des Artikels.

Installieren

npm

npm install vue-awesome-swiper --save

Einführen

Globale Einführung

Einführung in Eintragsdateimain.js

import VueAwesomeSwiper from 'vue-awesome-swiper' 
// require stylesimport 'swiper/dist/css/swiper.css'
 Vue.use(VueAwesomeSwiper, /* { default global options } */)

Lokale Einführung

Karussell wird bei Bedarf benötigt. Einführung

import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'

in die Vue-Seite der Figur und fügen Sie Swiper

components:{
    swiper,
    swiperSlide
  }

in CoKomponenten mit

HTML-Struktur

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

export default {
  data () {    return {
      swiperOption: {　　　　　
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [1, 2, 3]
    }
  }
｝

Attribut in swiperOption fest.

Verwendung von Flex-Layout

Stiländerung des Eingabe-Kontrollkästchens

Das obige ist der detaillierte Inhalt vonDas Vue-Plug-in implementiert ein Karusselldiagramm auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!