本次使用github上的一个开源插件,使用的是2.6.7稳定版本。安装指定版本的方法:在插件名后面加@版本号 ,即可
npm install vue-awesome-swiper@2.6.7 --save
引入:需要在main.js里引入如下:
import Vue from 'vue' //这个应该打包的时候就有了 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
使用:新建一个轮播组件swiper.vue
<template> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide><img class="swiper-img" src=""></swiper-slide> <swiper-slide><img class="swiper-img" src=""></swiper-slide> <swiper-slide><img class="swiper-img" src=""></swiper-slide> <swiper-slide><img class="swiper-img" src=""></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> </swiper> </template> <script> export default { name: 'carrousel', data() { return { swiperOption: { // some swiper options/callbacks // 所有的参数同 swiper 官方 api 参数 // ... } } } </script>
在需要用的地方引入这个组件就可以了