vue-awesome-swiper实现组件化swiper

vue-awesome-swiper

在vue项目中可以使用vue-awesome-swiper来创建swiper组件。

github地址

案例：vue轮播图

• 安装vue-awesome-swiper插件，npm i vue-awesome-swiper ，安装完后package.json中有了vue-awesome-swiper

"dependencies": {
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3"
}

• 在main.js中引用。

import Vue from 'vue'
import App from './App'


import vueSwiper from 'vue-awesome-swiper'    //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'    //引入样式

Vue.config.productionTip = false

Vue.use(vueSwiper)    // 使用插件


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

• swiper的基本结构为：

 <swiper>
        <swiper-slide class="swiper-slide"></swiper-slide>
 </swiper>

• 在App.vue中实现：

<template>
  <div id="app">
    <div>
      <swiper>
        <swiper-slide class="swiper-slide" v-for="item in slide" :key="item">
          我是第{{item}}个轮播图
        </swiper-slide>
      	 <div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>
          <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>  <!-- 箭头右 -->
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
 data() {
    return {
      slide: [1, 2, 3, 4, 5],
      //设置属性
      swiperOption: {
        //显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允许分页点击跳转
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next', 
          prevEl: '.swiper-button-prev'
        },
        //自动轮播
        autoplay: {
          delay: 400
        },
        //开启循环模式
        loop: true,
        //开启鼠标滚轮控制Swiper切换
        mousewheel: true
      }
    }
  }
}
</script>

<style>
.swiper-slide {
  width: 100%;
  height: 500px;
  line-height:500px;
  font-size: 50px;
  text-align: center;
  background-color: blue;
}
</style>

完~

基本属性介绍

autoplay: 自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换

loop：设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的

grabCursor: 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

direction: Slides的滑动方向，可设置水平(horizontal)或垂直(vertical),默认为horizontal

pagination: 分页器容器的css选择器或HTML标签

paginationType: 分页器样式类型,可选 ‘bullets’ 原点（默认）、‘fraction’ 分式、‘progress’ 进度条、‘custom’ 自定义

paginationClickable: 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换

mousewheelControl： 是否开启鼠标控制Swiper切换，设置为true时，能使用鼠标滚轮控制slide滑动

组件化：slider 滑动模块

main.js中引入：

import vueSwiper from 'vue-awesome-swiper'    //引入vue-awesome-swiper

创建 slider.vue文件：
使用时，只需传入items模块内容数组（json），cname 类css样式：

<template lang="html">
    <section :class="cname"> //cname 可传入css样式,传入的参数：options，内容items
        <swiper :options="options" :not-next-tick="options.notNextTick">
            <swiper-slide v-for="item in items" :key="item.href">
                <router-link :to="{ name: item.href}">
                    <img :src="item.src" alt="">
                </router-link>
            </swiper-slide>
             <!--设置圆圈-->
            <div class="swiper-pagination" v-if="options.pagination" slot="pagination">
            </div>
        </swiper>
    </section>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
export default {
    components: {
        swiper,
        swiperSlide,
    },
    props: {
        cname: {   //传入的css样式
            type: String,
            default: "",
        },
        options: {    //设置参数
            type: Object,
            default() {
                return {
                    autoplay: 3000,  
                    loop: true,
                    pagination:'.swiper-pagination', 
                    notNextTick: false,
                }
            },
        },
        items: {     //传入的内容
            type: Array,
            default() {
                return []
            },
        },
    },
}
</script>

<style lang="css">
  @import "~swiper/dist/css/swiper.css";   //引入样式
</style>

引入：

<template lang="html">
	<Slider :items="items" :cname="slider"></Slider>
</template>

<script>
    import Slider from "../../slider"
    export default {
        components: { Slider },
        data(){
            return{
				items: [{   //传入的值
                    href: "home",
                    src: "",
                }],

				}
            }

</script>

<style>
 .slider{
        margin-top: 120px;
        img{
            width: 100%;
        }
    }
</style>