[记录] [Hot] Vue-cli 引入VueAwesomeSwiper

Vue脚手架引入Swiper最新实操步骤:

//npm
npm install vue-awesome-swiper --save

//可以全局 or 局部引用
全局:

//main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './swiper4/swiper.css' // 这个css要去官网下载然后放进项目引入
Vue.use(VueAwesomeSwiper)

局部:

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

swiper,
swiperSlide

}

使用

<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination"  slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar"   slot="scrollbar"></div>

js and css

return {
  swiperOption: {
    notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
    autoplay: true,
    autoplay: {
      disableOnInteraction: false,  //用户左划右划后恢复自动轮播
      delay: 1000
    },
    loop: true,
    direction: 'horizontal',
    grabCursor: true,
    setWrapperSize: true,
    autoHeight: true,
    pagination: {
      el: '.swiper-pagination'
    },
    centeredSlides: true,
    paginationClickable: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    keyboard: true,
    mousewheelControl: true,
    observeParents: true, // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
    debugger: true
  }
}

},computed: {

swiper() {
  return this.$refs.mySwiper.swiper
}

},
mounted() {

// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// this.swiper.slideTo(3, 1000, false)

},
components: {

swiper, swiperSlide

}
}

提示
新版的VueAwesomeSwiper是从Swiper4改写的,
api写法有变化,老版本的写法会引起组件失效
比如autoplay,pagination,prevButton,nextButton等属性

在新版的api文档中新增了组件选项,使用新写法就可以正常使用了
查看新版api文档

点个赞就成功啦哈!