vue-swiperの使用チュートリアル

swiperは私が前にフロントエンドページを作って使ったプラグインで、自分ではとても使いやすいと思います.swiperは、様々な形式で、各端末に適応するマルチキャストマップ効果を提供する.本文は編集者が皆さんに持ってきたvue-swiperの使用チュートリアルです.
vue-awesome-swiper公式サイトリンクhttps://www.npmjs.com/package/vue-awesome-swiper
前のエッセイと同じように、バッグをダウンロードしてmainに行きます.jsの中に配置します.npm install vue-awesome-swiper --save
importの方法で

// import 
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' 

requireも使えます

var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper') 

どちらも目的を達成してからjsにグローバル登録

Vue.use(VueAwesomeSwiper) 

テンプレートで使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
  swiper,
  swiperSlide
 }
} 




 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption: {//       ，   swiper   api，  http://www.swiper.com.cn/api/
     // notNextTick         ，  notNextTick   true，       NextTick    swiper，                swiper  ，<br>　　　　　　　　             swiper       ，          true
     notNextTick: true,
     // swiper configs       swiper  api  
     autoplay: 3000,
     direction : 'vertical',
     grabCursor : true,
     setWrapperSize :true,
     autoHeight: true,
     pagination : '.swiper-pagination',
     paginationClickable :true,
     prevButton:'.swiper-button-prev',//   
     nextButton:'.swiper-button-next',//   
     scrollbar:'.swiper-scrollbar',//   
     mousewheelControl : true,
     observeParents:true,
     //          ，             ，           ，  debugger
     debugger: true,
    }
   }
  },
 }
 

これで使えます
 
普段あまり使われていないこのプラグインを、今日见て、少し小さな変更を発见して、前の影响を受ける可能性があります、npmパッケージのリリース者の原话は
//starting with version 2.6.0,you need to manually introduce swiper's cssバージョン2.6.0からswiperのcssを手動で導入する必要がありますrequire('swiper/dist/css/swiper.css')
私がこのエッセイを書いた時、まだ2.4.2バージョンで、まだ2.6.0バージョンに更新されていなかったので、あまりスタイル的な問題はありませんでしたが、今日はバッグを更新して前に書いたものを試してみましたが、スタイルに問題があったことに気づきました.だから探したドキュメントは、ここで補足して、皆さんの役に立つことを望んでいます.