如何在Vue项目中使用swiper

如何在Vue项目中使用swiper

安装vue-awesome-swiper

这是官方推荐的在vue中使用的swiper
npm install vue-awesome-swiper --save

全局引入

在main.js中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

局部引入

如果你的项目使用swiper不多，可以在需要的vue文件内进行引入

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

components: {
  Swiper,
  SwiperSlide
}

具体实现

首先是html代码，这里我只需要分页器，所以只引入了分页器

<Swiper ref="mySwiper" :options='swiperOption' class="swiper-container">
	 <!-- slides -->
	 <swiper-slide class="swiper-item" v-for='banner in banners' :key='banner.bannerId'>
	     <img class='swiper-img' :src='banner.pic'/>
	 </swiper-slide>
	 
	 <!-- 分页器 -->
	 <div class="swiper-pagination" slot="pagination"></div>
</Swiper>

之后是swiperOption的配置

swiperOption: {
 pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: 'bullets'
  },
  loop: true,
  autoplay: {
    delay: 3000
  },
  speed: 1000,
  observer: true, // 修改swiper自己或子元素时，自动初始化swiper
  observeParents: true // 修改swiper的父元素时，自动初始化swiper
}

获取到swiper

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

确保在mounted生命周期挂载数据。可以使用this.$nextTick()进行dom更新