vue-awesome-swiper插件爬坑

時間 2019-11-17

標籤 vue awesome swiper 插件简体版

原文原文鏈接

最近本身在作一個基於vue的知乎的移動端單頁面，遇到不少坑，先說一下遇到最大的坑，其實並不推薦使用 vue-awesome-swiper,若是項目應用輪播，切換少的話。言歸正傳，如今來介紹vue-awesome-swiper的使用方法。css

首先基於的是vue2.0。vue

1，使用npm安裝node

npm install vue-awesome-swiper --save

2，引入資源（自己vue-awesome-swiper就很大了，這裏推薦全局引入）npm

在main.js內ide

import VueAwesomeSWiper  from 'vue-awesome-swiper'// 引入插件
import 'swiper/dist/css/swiper.css' //引入輪播樣式，必需要引入，我就上了這個的虧

Vue.use(VueAwesomeSWiper)

樣式的路徑是基於node-module的oop

3，在所在的組件中使用:this

模板文件spa

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="top in tops">
        <img :src="top.image">
        <div></div>
        <h3>{{top.title}}</h3>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

js插件

export default {
      data() {
          return {
            swiperOption:{
                autoplay: {
                  delay:3000
                },
                direction: 'horizontal',
                effect: 'slide',
                loop: false,
                pagination:{
                  el:'.swiper-pagination',
                  type: 'bullets'
                },
                autoplayDisableOnInteraction: false,
                observer: true,
                observeParents: true
            }
   }，
  computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
      },
}