项目中使用vue-awesome-swiper

一.简介

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

下载安装

打开 surmon-china/vue-awesome-swiper，参考安装使用教程。

1. 选用npm下载安装

项目目录

win7下，cmd终端，进入根目录，cnpm install vue-awesome-swiper@2.6.7 --save

我的网速慢，使用cnpm代替npm，@2.6.7表示安装的版本，--save本地测试还是项目上线，都会用到vue-awesome-swiper@2.6.7

安装完成后，在项目的node_modules目录下会找到

2.使用

全局挂载：

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件挂载

// require stylesimport 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {  components: {
    swiper,
    swiperSlide
  }
}

由于我们要在很多地方用到该插件，选用全局方式，把上述全局代码复制到src/main.js中
2.SPA在单页面开发中的应用
新建一个.vue文件，按照以下代码模式更改

<!-- The ref attr used to find the swiper instance --><template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- 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>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <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>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper></template><script>
  export default {    name: 'carrousel',
    data() {      return {        swiperOption: {          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },    computed: {
      swiper() {        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)      this.swiper.slideTo(3, 1000, false)
    }
  }</script>

例如：

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" class="swiper-container" >
        <!-- slides -->
        <swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
            <img class='swiper-img' :src='item.imgUrl' alt="去哪儿门票" />
        </swiper-slide>
        <!-- Optional controls ,显示小点-->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div></template><script>export default {    name:'HomeSwiper',    //es6的写法，相当于data:function(){return{swiperOption:{}}}
    data(){        return{            swiperOption:{                // 参数选项,显示小点
                pagination:'.swiper-pagination',                //循环
                loop:true,                //每张播放时长3秒，自动播放
                autoplay:2000,                //滑动速度
                speed:1000,                // delay:1000
                
               
            },            //三张轮播，使用变量循环
            swiperList:[
                {                    id:'001',                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
                },
                {                    id:'002',                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
                },
                {                    id:'003',                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
                }
            ]
        }
    },
      
}</script><style lang='stylus' scoped>// >>>穿透作用，因为swiper-pagination-bullet-active类在组件内部定义的，想要wrapper也能作用到，可以用>>>
    .wrapper >>>.swiper-pagination-bullet-active
        background #fff !important
    .wrapper
        overflow:hidden
        width 100%
        height:0
        padding-bottom:26.6666667%
        background :#ccc
        .swiper-item
            width:100%
            .swiper-img
                width:100%</style>

作者：fenerchen
链接：https://www.jianshu.com/p/c4925ef55eaa