step1.安装插件
cnpm install vue-awesome-swiper --save
step2.在当前页面引用插件
// 引入swiper的css样式
require('swiper/dist/css/swiper.css');
import Vue from "vue";
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
import { swiper, swiperSlide } from 'vue-awesome-swiper';
step3.组件声明
components: {
swiper,
swiperSlide,
},
step4.data数据声明
!!! notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
data(){
return {
notNextTick: true,
swiperOption: {
// swiper optionss 所有的配置同swiper官方api配置
// autoplay: 3000,
direction: 'horizontal',
grabCursor: true,
setW