ホームページ > ウェブフロントエンド > jsチュートリアル > vueプラグインはモバイル端末にカルーセルチャートを実装します

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

php中世界最好的语言
リリース: 2018-03-19 10:59:16
オリジナル
4477 人が閲覧しました

今回は、モバイル カルーセル チャートを実現するための 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート