vue-awesome-swiper最新版轮播图实战demo及参数详解

旧城等待， 2023-07-10 05:10 12阅读 0赞

`vue-awesome-swiper`是vue项目插件之一，用于开发轮播功能。它基于`swiper`轮播插件，由大牛开发而出，奉上源仓库：[https://github.com/surmon-china/vue-awesome-swiper][https_github.com_surmon-china_vue-awesome-swiper]

## 一、安装 ##

可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装：

npm install swiper vue-awesome-swiper
    
    cnpm inatall swiper vue-awesome-swiper

## 二、引入 ##

**全局引入：**

import Vue from 'vue'
    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
      }
    }

建议大家习惯全局引入，插件不大，个人认为无需节省这点空间，以免开发轮播功能时缺少组件。

## 三、实战demo ##

安装引入完成后，就可以开始在对应的地方使用插件开发功能了。这里简单地做个轮播图demo：

<template>
        <div class="wrapper">
            <swiper :options="swiperOption" v-if="list.length"> //导入图片数据数组
                <swiper-slide v-for="item of list" :key="item.id">
                    <img class="swiper-img" :src="item.imgUrl"/> //循环数组轮播图片
                </swiper-slide>
    
                <div class="swiper-pagination"  slot="pagination"></div> //分页器
            </swiper>
        </div>   
    </template>
    
    <script>
    export default { 
        name:"homeSwiper",
        data (){ 
            return { 
                swiperOption:{        //轮播插件配置参数
                    pagination:{          //分页器
                        el:'.swiper-pagination',
                        clickable:true
                    },
                    loop:true,     //循环
                    autoplay:{       //自动播放
                        delay:1500,
                        disableOnInteraction:false
                    },
                    speed:1500     //播放速度
                }
            }
        },
        props:{ 
            list:Array
        }
    }
    </script>
    
    <style lang="stylus" scoped>
        .wrapper >>> .swiper-pagination-bullet-active 
            background: #fff
        .wrapper
            background :#eee
            overflow :hidden
            width :100%
            height :0
            padding-bottom:30.48%
            .swiper-img
                width:100%
    </style>

以上是vue项目中一个轮播图组件homeSwiper.vue的完整代码。可以看到`vue-awesome-swiper`插件的实现核心在于`<swiper>`和`swiperOption`：  
**1、要养成习惯将整个轮播部分用一个div在外部包装起来，这会避免一些不必要的报错；  
2、`<swiper>`内通常由两部分：`<swiper-slide>`轮播元素盒子、指示器元素盒子(可选)；  
3、`swiperOption`内是配置轮播插件的参数，在`<swiper>`上绑定option属性导入即可。**

这样就实现简单的轮播图功能了，下面的效果图：  
![在这里插入图片描述][20200229170713909.png]![在这里插入图片描述][20200229170725396.png]

## 四、swiperOption参数 ##

`vue-awesome-swiper`插件最新版3.1.3是基于swiper4开发，所以它的`swiperOption`属性也和swiper4所有api属性一致。鉴于中文官网已下架swiper4手册，我们可以直接阅读swiper5手册学习api属性：[https://www.swiper.com.cn/api/index.html][https_www.swiper.com.cn_api_index.html]  
swiper4/5比较于swiper3最大的变化在于它将部分配置组件化，简单说以前一些配置是单值，现在成了对象。下面对一些常用配置参数简单介绍：

**- 一般选项**  
**direction：** 滑动方向，可设置水平(horizontal)或垂直(vertical)。类型：string 默认：horizontal  
**speed：** 切换速度，滑动开始到结束的时间（单位ms）。类型：number 默认：300  
**on：** 注册事件，Swiper4/5使用关键词this指代Swiper实例。类型：object  
**loop：** 设置为true 则开启loop模式，循环播放。类型：boolean  
**preventClicks：** 当swiper在触摸时阻止默认事件，用于防止触摸时触发链接跳转。类型：boolean 默认：true  
**touchRatio：** 触摸比例。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动。类型：number 默认：1  
**noSwiping：** 设为true时，可以在slide上（或其他元素）增加类名’swiper-no-swiping’，使该slide无法拖动，希望文字被选中时可以考虑使用。类型：boolean 默认：true  
  
**- autoplay对象**  
设置为true启动自动切换，并使用默认的切换设置。类型：boolean/object 默认：false  
**delay：** 自动切换的时间间隔，单位ms。类型：number 默认：3000  
**stopOnLastSlide：** 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。类型：boolean 默认：false  
**disableOnInteraction：** 用户操作swiper之后，是否禁止autoplay。类型：boolean 默认：true停止。  
**reverseDirection：** 开启反向自动轮播。类型：boolean 默认：false

**- pagination对象**  
使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。类型：object  
**el：** 分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外。类型：string or HTML Element 默认：null  
**type：** ‘bullets’圆点(默认) 'fraction’分式 ‘progressbar’进度条 ‘custom’自定义  
**clickable：** 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。类型：boolean 默认：false  
**hideOnClick：** 默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。类型：boolean 默认：false

**- navigation对象**  
使用前进后退按钮来控制Swiper切换。类型：object  
**nextEl：** 设置前进按钮的css选择器或HTML元素。类型：string / HTMLElement 默认：null  
**prevEl：** 设置后退按钮的css选择器或HTML元素。类型：string / HTMLElement 默认：null  
**hideOnClick：** 点击slide时显示/隐藏按钮。类型：boolean 默认：false

**- scrollbar对象**  
为Swiper增加滚动条。类型：object  
**el：** Scrollbar容器的css选择器或HTML元素。类型：string / HTMLElement 默认：null  
**hide：** 滚动条是否自动隐藏。默认：false，不会自动隐藏。类型：boolean 默认：true  
**draggable：** 该参数设置为true时允许拖动滚动条。类型：boolean 默认：false

**- Methods方法**  
swiper4/5有很多内置方法，对`vue-awesome-swiper`插件一样可用，这里就不一一列举了，官网手册翻阅即可。

**- Properties属性**  
swiper4/5有很多针对swiper实例的属性，例如`mySwiper.activeIndex`、`mySwiper.width`、`mySwiper.height`等，官网手册翻阅即可。

## 五、总结 ##

总的来说还是感谢大牛们的贡献为vue开发出实用的插件，使用方法如上并不复杂，需要什么特殊功能可以到swiper官网翻阅相应配置参数。以上只是部分常用配置参数和版本变化的讲解，仅供交流学习。

[https_github.com_surmon-china_vue-awesome-swiper]: https://github.com/surmon-china/vue-awesome-swiper
[20200229170713909.png]: https://img-blog.csdnimg.cn/20200229170713909.png
[20200229170725396.png]: https://img-blog.csdnimg.cn/20200229170725396.png
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html