vue中使用swiper插件实例_在vue中使用swiper.js的正确方法

swiper是一个在切图中好用到不行的图片轮播插件，包括3d轮播、h5滑屏等复杂应用都不在话下，到了vue项目一切逻辑完全颠覆了，没有获取dom的概念，还好有 vue-awesome-swiper组件，让我们可以无缝的继续使用swiper。如果没记错的话vue-awesome-swiper基于swiper3.x 开发得来。

1.npm安装

npm install vue-awesome-swiper –save

2.main.js全局安装

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.组件里调用

import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}}

4、缩略图(普通的swiper很简单，网上有很多可以借鉴 我备注一下缩略图的)template中

data中定义

data() {return {swiperOptionTop: {spaceBetween: 10,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {spaceBetween: 10,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,slideToClickedSlide: true}}},

mounted中

mounted() {this.$nextTick(() => {const swiperTop = this.$refs.swiperTop.swiperconst swiperThumbs = this.$refs.swiperThumbs.swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})}

style部分