Vue Awesome Swiper文档详解

Vue Awesome Swiper是一个Vue的轮播组件库，使用它可以很方便的创建各种轮播效果，如：切换效果、分页、导航按钮、动态添加slide等。官方文档详细介绍了组件的使用方法、属性、事件等，下面从多个方面对Vue Awesome Swiper文档做详细阐述。

一、安装和基本使用

1、首先需要安装Vue Awesome Swiper

npm install vue-awesome-swiper --save

2、然后在您的Main.js或其他变成文件中，在全局注册它:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// 如果您需要使用CSS样式
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3、在Vue组件中使用

  
<script>
  export default {
    data () {
      return {
        swiperOption: {
          direction: 'vertical',
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
  }
</script>

在上面的例子中，我们使用vue-awesome-swiper版的Swiper轮播库创建了一个简单的轮播效果，通过data对象的swiperOption属性设置Swiper轮播库的参数，然后再Swiper组件中使用swiperOption参数创建Swiper轮播。

二、Swiper组件的属性和事件

1、Swiper组件的属性

下面是Swiper组件的一些常用属性，可以在swiperOption对象中进行设置：

• initialSlide:number：默认初始幻灯片索引
• direction:string：swiper滑动方向，可设置为horizontal、vertical
• speed:number：滑动速度，即切换动画的速度
• autoplay:boolean/object：是否自动播放。为false表示不自动播放，true则设置切换时间；object则设置autoplay的参数
• pagination:object/string：分页器，可以设置分页器的类型为bullets、fraction、progress等。可以设置一个类名绑定到pagination属性成为自定义分页的容器，所有sort的子元素都将成为该分页器的其中一个分页。 点击分页器进行切换
• navigation:object：前进后退按钮，默认值为false表示不要这样的按钮。可以设置nextEl、prevEl两个属性获取DOM对象来控制切换
• loop:boolean：是否循环轮播
• preloadImages:boolean：是否开启所有图片预加载方式
• lazy:object：开启Swiper懒加载，可以设置preloaderClass、loadingClass、loadedClass、loadPrevNext、loadPrevNextAmount、loadOnTransitionStart、elementClass、threshold等参数
• keyboard:boolean：开启键盘控制
• slidesPerView:number：每页的Slide数量。可以设置为auto自动根据Swiper容器尺寸计算数量，或者具体的数字
• slidesPerColumn:number：分成多少列

2、Swiper组件的事件

下面是绑定在Swiper组件上的一些事件：

• init：Callbacks(初始化后)当Swiper初始化之后执行的回调函数
• slideChange：Callbacks(切换结束时)当Slide切换结束后执行的回调函数，即回调函数在用户双击或使用键盘导航键(上下左右方向键)触发弹出之前触发。
• slideChangeTransitionEnd：Callbacks(切换完成时)当Slide切换完成后执行的回调函数。
• slidePrevTransitionEnd：Callbacks(从前面的slide到当前)切换从前一个到当前(上一个)Slide。
• slideNextTransitionEnd：Callbacks(从下一个切换到当前)当切换从下一个到当前(下一个)幻灯片时显示的调用函数。
• sliderMove：Callbacks(滑动时)滑动Swiper或拖动Swiper时执行的回调函数。
• transitionStart：Callbacks(转换开始时)当切换Slide时触发此回调函数。可以使用slideChange触点轮廓，而无需考虑是否当前为手动切换。触点轮廓长度为Smooth时长。
• transitionEnd：Callbacks(转换完成后)当切换幻灯片(Slide)的过渡效果完成时出发此回调函数。

三、Swiper-slide组件的属性和事件

1、Swiper-slide组件的属性

下面是Swiper-slide组件常用的一些属性：

• graggable:boolean：是否允许滑动
• zoom:boolean：是否允许缩放
• zoomMax:number：缩放最大值
• zoomToggle:boolean：设置是否允许使用双指触摸缩放
• flexbox:boolean：控制flexbox容器水平或垂直方向
• hideOnClick:boolean：设置是否在单击时隐藏
• preventClicks:boolean：为有意点击而不滑动轮播的寄存器
• preventClicksPropagation:boolean：设置为false作为消除仓库单单击不会传播到swiper容器
• slideToClickedSlide:boolean：单击幻灯片时自动滑动到该幻灯片。
• visibilityFullFit:boolean：使内容适合其容器(默认为“重新计算阀门”)。

2、Swiper-slide组件的事件

绑定在Swiper-slide组件上的事件：

• beforeSlideEnter：Callbacks(在幻灯片进入前)在幻灯片进入之前执行的回调函数，进入成功则传入该slide的实例。
• slideEnter：Callbacks(当幻灯片进入)在幻灯片进入后执行的回调函数，进入成功则传入该slide的实例。
• slideAfterChange：Callbacks(幻灯片切换结束后)幻灯片切换结束后执行的回调函数。
• slideBeforeChange：Callbacks(幻灯片切换前)幻灯片切换之前的回调函数。

四、Swiper的其他配置

1、设置Swiper初始值

当组件已经加载并且你想设置滑动到某一个位置时，可以通过使用‘update’函数实现：

<script>
  export default {
    mounted () {
      this.$nextTick(function () {
        this.$refs.mySwiper.update()//强制swiper更新
        this.$refs.mySwiper.slideTo(2, 1000); //滑动到第二个
      })
    }
  }
</script>

2、Swiper的不同遮罩效果

你可以在建立Swiper实例时添加自己的自定义遮罩效果：

  

  
   

    
    
  
      
     

        
      
 类名遮罩()
        
      
基于最新构建，上面示例的图片可以看出遮罩层很柔和。通过这个例子，您可以尝试为自己的Swiper设置不同的遮罩层，实现不同的效果。
      
     
    
    
  
   
  
   


  

3、深度修改自定义组件样式

你可以修改Swiper组件内的某些元素的样式，首先在父组件中建立子组件SwiperSlide, 然后重写样式:

五、总结

Vue Awesome Swiper是一个功能丰富的轮播组件库，可以快速实现各种轮播效果。本文就它的安装、基本使用、Swiper组件的属性和事件、Swiper-slide组件的属性和事件以及Swiper的其他配置等方面展开了详细的介绍。希望本文可以帮助大家掌握Vue Awesome Swiper的使用方法。