1.下载
npm install vue-awesome-swiper --save 这种下载方式是最新版
npm install vue-awesome-swiper@3.1.3 --save 建议使用安装指定版本
2.引入及配置
引入有2种方式,一种是全局引入,第二种是按需引入(局部引入)方式。下来来说下怎么使用:
1)全局引入
在main.js引入:
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
组件中使用,就是一般组件的用法
<swiper :options="swiperOption">
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</swiper-slide>
<swiper-slide>4</swiper-slide>
<swiper-slide>5</swiper-slide>
<swiper-slide>6</swiper-slide>
<!--也可以换成图片-->
<swiper-slide><img src="static/images/1.jpg"></swiper-slide>
<swiper-slide><img src="static/images/2.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
data(){
return{
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
}
}
}
2)按需引入[局部引入方式
单个组件引入,这种方式是性能比较好点。
-
/*组件方式引用*/ import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式,以及具体位置。 import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } <script> import "swiper/dist/css/swiper.css"; //这里注意具体看使用的版本是否需要引入样式,以及具体位置。 import { swiper, swiperSlide } from "vue-awesome-swiper"; export default { name: "About", components: { swiper, swiperSlide, }, data() { return { //swiper3 swiperOption: { autoplay: 3000, speed: 1000, }, }; }, }; </script>