vueプラグインはモバイル端末にカルーセルチャートを実装します

今回は、モバイル カルーセル チャートを実現するための vue プラグインについて説明します。モバイル カルーセル チャートを実現するための vue プラグインの 注意事項 については、次のとおりです。

案の定、Vueベースのプラグインはまだたくさんあるので、APIを見ると、VueとSwiperをベースに開発されたカルーセルチャートプラグインであるvue-awesome-swiperを探しました。と書くと、常に警告が報告されます...自分で調べたほうがいいです...

この記事は、Vue CDN の概要での使用にのみ適用され、記事の最後の API リンクを参照してください。 。

インストール

npm

npm install vue-awesome-swiper --save

はじめに

グローバルの紹介

エントリファイルでの紹介main.js

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

ローカルの紹介

カルーセル画像を使用する必要がある場合は

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

を導入してください を vue ページに追加し、

html 構造

components:{
    swiper,
    swiperSlide
  }

data を使用して swiper

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

を coコンポーネントに追加します:

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

上記は、他の場合、基本的なカルーセル効果を実現できます。効果、 Swiper公式APIを参照し、swiperOptionにパラメータ

attributes

を設定してください。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フレックスレイアウトの使用法

入力チェックボックスのスタイルの変更

以上がvueプラグインはモバイル端末にカルーセルチャートを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。