vue-awesome-swiper的用法

时间:2019-01-11
本文章向大家介绍vue-awesome-swiper的用法,主要包括vue-awesome-swiper的用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

vue框架的轮播图插件vue-awesome-swiper

  1. 安装
npm install vue-awesome-swiper --save
  1. 引入
/*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
/*组件方式引用*/
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
	    components: {
	      swiper,
	      swiperSlide
	    }
	}
  1. 使用
<swiper :options="swiperOption" ref="mySwiper">
     <!-- slides -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      
      <!-- Optional controls以下按需使用 -->
      <div class="swiper-pagination "  slot="pagination"></div>	<!--分页-->
      <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>   <!--上一项-->
      <div class="swiper-button-next swiper-button-black" slot="button-next"></div>	<!--下一项-->
      <div class="swiper-scrollbar"   slot="scrollbar"></div>		<!--滚动条-->
</swiper> 
data(){
	return{
		swiperOption: {
			notNextTick: true,
			//循环
			loop:true,
			//设定初始化时slide的索引
			initialSlide:0,
			//自动播放
			autoplay:true,
			// 设置轮播
			effect : 'flip',
			//滑动速度
			speed:800,
			//滑动方向
			direction : 'horizontal',
			//小手掌抓取滑动
			grabCursor : true,
			//滑动之后回调函数
			on: {
				slideChangeTransitionEnd: function(){
				   // console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
				},
			},
			//左右点击
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			//分页器设置         
			pagination: {
				el: '.swiper-pagination',
				clickable :true
			}
		}
	}
},
components: {
	swiper,
	swiperSlide
}

具体的swiper设置属性可以查看中文API文档:http://www.swiper.com.cn/api