工作中日常筆記，vue中使用swiper插件，在pc端和h5端也是常用的插件，記錄下來以便下次查看，避免踩坑。

使用版本

"swiper": "^6.3.5",
"vue-awesome-swiper": "^3.1.3"

安裝

cnpm install swiper vue-awesome-swiper --save

引入

main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

使用

在組件中應用，根據(jù)具體情況自行配置，具體參考swiper官方文檔

<swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

swiperOptions: {
  slidesPerView: 4,//顯示個數(shù)
  direction: 'vertical',
   pagination: {
      el: '.swiper-pagination'
   },
}

computed: {
   swiper() {
      return this.$refs.mySwiper.swiper
   }
},
 mounted() {
    this.swiper.slideTo(3, 1000, false)
 }

<style>
 .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 200px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

實現(xiàn)效果

日常記錄一篇筆記，一個工具推薦，雖然瀏覽量很少，但能夠記錄下來，就是一種收獲。