1.文档地址： git地址  ：https://github.com/surmon-china/vue-awesome-swiper

安装

npm install vue-awesome-swiper --save

更换版本：

先卸载最新的
npm uninstall vue-awesome-swiper

安装低版本
npm install vue-awesome-swiper@2.6.7 --save

拍坑：在用3.1.3新版时候。分页器老不出来。折腾了好久。要崩溃。

1.方案，可以回老版本

2.写法换下。

  // pagination: '.swiper-pagination',
  //paginationType: 'bullets', //这个写法在 3.1.3版本，分页器无法显示
//改版4.x后的写法。参照官方文档
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          //type: 'fraction',
          //type : 'progressbar',
          //type : 'custom',
        },

版本换代。再加上写法不同，网上大佬提供的各有不同，组合在一起出现各种未知bug害苦了苦逼的我们。所以还是老实研究文档吧

涉及到自定义修改细节样式，

import "../../../node_modules/swiper/dist/css/swiper.min.css";

这是安装时候生成的css文件。也可以下放在style里引入，带@

 

<style>
  @import "../../yourpath/swiper-3.4.2.min.css";


...

/<style>

。其中scoped限制去掉。为了修改原样式进行覆盖。谨慎修改，防止类名冲突重复

ok

二、 点击事件。用vue的绑定滑块事件是无效的。

swiperOption: {
        notNextTick: true,
        initialSlide:0, // 设定初始化时slide的索引。
        effect:"coverflow",
        autoplay: true,   //自动轮播
        delay:3000, //自动轮播间隔时间，单位ms
        loop:true, //循环轮播 是否
        on:{
          click:function(){
            
            console.log(this); //这里坑：this指向是swiper，不是vue
            let idx = this.realIndex;
            console.log(idx)
          }
        },
        moveStartThreshold:100, 
。。。。

也可以使用回调函数，来做。

<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

测试代码：

<template>
  <div class="home">
  
    <div class="wrapper" ref="wrapper">
      <div class="content home-container">
          
          <!-- swipe slide-->
          <div class="">
              <swiper :options="swiperOption" ref="mySwiper" @click="callback">
               <!-- slides -->
               <swiper-slide class="swiper-item" v-for="(list,index) in swiperSlides" :key="index">
                 {{list.name}}
             
                    <img :src="list.swsrc" alt=""  width="100%">
                  
                  
           
               </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>
          </div>

      </div>
    </div>
 
  </div>
</template>

<script>
import BScroll from 'better-scroll'

 import { swiper, swiperSlide } from 'vue-awesome-swiper'

import HeaderTop from '../../components/header/Header.vue'
// import "../../../node_modules/swiper/dist/css/swiper.min.css";
export default {
  name: 'HelloWorld',
  components:{
    HeaderTop,
     swiper,
    swiperSlide,
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      slideList:[
        {name:'tt1',src:'sss'},
        {name:'tt2',src:'sss'},
        {name:'tt3',src:'sss'},
        {name:'tt4',src:'sss'},
      ],
      swiperSlides:[
        {'pic':'预见未来 ','des':'Mate10 系列','des1':'华为莱卡 联合设计','swsrc':'static/slide/ban01.jpg'},
        {'pic':'华为商城 ','des':'全场最高省700','des1':'亿元优惠券大放送','swsrc':'static/slide/ban02.jpg'},
        {'pic':'华为云 ','des':'注册赢 Mate10','des1':'全场云产品低至五折','swsrc':'static/slide/ban03.jpg'},
        {'pic':'华为云 ','des':'注册赢 Mate10','des1':'全场云产品低至五折','swsrc':'static/slide/ban04.jpg'},
      ],
      data:'',
      swiperOption: {
        notNextTick: true,
        initialSlide:0, // 设定初始化时slide的索引。
        effect:"coverflow",
        autoplay: true,   //自动轮播
        delay:3000, //自动轮播间隔时间，单位ms
        loop:true, //循环轮播 是否
        clickable:true,
        on:{
          click:function(){
          
            console.log(this);
            let idx = this.realIndex;
            console.log(idx)
          }
        },
        moveStartThreshold:100, //滑动的临界值，临界值单位为px，如果触屏距离小于该值滑块不会运动
        direction : 'horizontal',   //方向，可设置水平(horizontal)或垂直(vertical)
        autoplayDisableOnInteraction : false, //设置用户滑动停止，离开后再自动轮播 ,默认true不会
        // pagination: '.swiper-pagination', //这个写法在 3.1.3版本，分页器无法显示
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets',
          // type: 'fraction',
          // type : 'progressbar',
          // type : 'custom',
          // 下方对分页自定义样式
          // renderBullet: function (index, className) {
          //    return '<span class="' + className + '">' + (index + 1) + '</span>';
          //  },
          renderBullet: function (index, className) {
            let text = '';
            switch(index){
              case 0:text='壹';break;
              case 1:text='贰';break;
              case 2:text='叁';break;
              case 3:text='肆';break;
              case 4:text='伍';break;
            }
            return '<span class="' + className + '">' + text + '</span>';
          },
        },
        paginationClickable: true,  //分页器可以点击
        scrollbar:'.swiper-scrollbar',
        scrollbarHide:false,//false 一直显示，true只要滚动时候显示,默认false
        preventClicks : false,//默认true,阻止触摸滑动时的跳转。
      }
    }
  },
  computed:{
    // console.log('computedsldkl')
     swiper() {
        return this.$refs.mySwiper.swiper
      }
  },
  created(){
    // this.vm = this;
  },
  mounted(){
    console.log('mounted')
    // 初始化滚动插件 better-scroll
    this.scroll = new BScroll(this.$refs.wrapper,{
      scrollY:true,
      click:true,//一开始的点击事件被bscroll阻止了，设置这个才能点击
    })
    // this.swipe();
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
     console.log('this is current swiper instance object', this.swiper)
    //this.swiper.slideTo(1, 1000, false) //默认初始化位置
   
  },
  methods:{
  
    callback:function(){
 
      console.log(this.swiper.realIndex)
      if (this.swiper.realIndex == 0) {
        this.$router.push({path:'/Test2'});
      }
    },
   
  } //end of methods
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
@import "../../assets/css/swiper-3.4.2.min.css";
.wrapper{
  overflow: hidden;
  height: 94vh;
  /*z-index: 1;*/
}
.home-container{
  min-height:1200px;
  border:1px solid red;
}
.swiperBox{
  /*min-height: 400px;*/
  border: 1px solid #000;
}

.swiper-slide{
  min-height:200px;
  border: 1px solid #000;
}
/*分页器样式设置*/
.swiper-pagination{
  /*width: 13%!important;*/
  border: 1px solid #fff;
}
.swiper-pagination-bullet{
  display: inline-block;
  width: 1.5rem!important;
  height: 1.5rem!important;
  color: #fff;
  border: 1px solid #fff!important;
  font-size: 0.85rem!important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-pagination-bullet-active{
  /*background-color: red!important;*/
}
/*间距*/
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 3px 10px;
}

  .swiper-item {
    width: 100%;
    height: 120%;
    text-align: center;
    font-size: 18px ;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
    -webkit-justify-content: center;
              justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

 

 

 

vue-awesome-swiper
也可以做区域滚动。页面滚动