需求场景：
在项目中vant满足不了一些比较好看的轮播需求，比如：

vnat自带的swiper场景比较单一，就这样的展示形式：

目前网上对于vue-awesome-swiper的使用方法各种坑，还被剩下的那几条头发嫌弃，大多数问题在于要么就是版本对不上，要么就是swiper.css import地址不对，要么就是swiper-pagination不显示，要么自动轮播失效……然后就各种bai度。

下面说一下亲测的正确使用方法：

安装

安装目前来说的比较稳定的版本 3.1.3，不建议安装4或以上的版本，到时候泪满坑都不一定能爬出来，哈哈哈

//直接安装即可，会自动安装3.1.3版本，并自带swiper3.4.2版本
npm i vue-awesome-swiper@3 -S

引入

<局部引入>

注意swiper, swiperSlide的格式，首字母是小写的。

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<全局引入>
main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
//样式
import 'swiper/css/swiper.css'
//使用插件
Vue.use(VueAwesomeSwiper)

页面结构

<template>
  <div class="example-3d">
  //展示当前轮播的页数位置
      {{ days }}
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in srcs" :key="index">
        <div class="aaa" :style="`{backgroundImage:url('${item}')}`"></div>
      </swiper-slide>
      //轮播焦点
      <div
        style="display: none"
        class="swiper-pagination"
        slot="pagination"
      ></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  props: ['signData'],
  components: {
    swiper,
    swiperSlide
  },
data() {
    let vm = this
    return {
      days: '一',
      srcs: [
        'xxx/bg_sy.png',
        'xxx/bg_sy.png',
        'xxx/bg_sy.png',
        'xxx/bg_sy.png',
        'xxx/bg_sy.png',
        'xxx/bg_sy.png',
        'xxx/bg_sy.png'
      ],
      active: 1,
      atime: 0,
      //配置swiper相关属性
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,		//slide做3d旋转时Y轴的旋转角度
          stretch: 0,		//每个slide之间的拉伸值，越大slide靠得越紧
          depth: 100,		//slide的位置深度。值越大z轴距离越远，看起来越小。
          modifier: 1,		//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
          slideShadows: false	//是否开启slide阴影
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
        //slideChangeTransitionEnd
        //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
          slideChangeTransitionEnd: function () {
          //activeIndex在不使用loop属性情况下使用可得准确的索引值
          // var sum = this.swiper.activeIndex
           console.log("当前是第几个slide:",this.realIndex)
            
            //使用loop属性下获得的索引值
            var sum = this.realIndex
            switch (sum) {
              case 0:
                vm.days = '一'
                break
              case 1:
                vm.days = '二'
                break
              case 2:
                vm.days = '三'
                break
              case 3:
                vm.days = '四'
                break
              case 4:
                vm.days = '五'
                break
              case 5:
                vm.days = '六'
                break
              case 6:
                vm.days = '七'
                break
            }
          }
        }
      }
    }
  },
}
</script>

 <style lang="scss" scoped>
.example-3d {
  width: 100%;
  height: 340px;
  padding-top: 50px;
  padding-bottom: 90px;
  text-align: center;
}
.aaa {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.swiper {
  height: 100%;
  width: 100%;

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    // 3:4
    width: 240px;
    height: 320px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    background-color: #2c8dfb;
    background-position: center;
    background-size: cover;
    color: #fff;
  }
  .swiper-slide img {
    height: auto;
    width: 100%;
  }
}

</style>

我们难免会在swiper里面根据当前滑动改变后改一些data里面的数据，这时候改变数据的动作是在事件 on：{} 里面来完成，但是在on里面会出现一个this指向的问题：
如果用function（）{}来实现的话，要修改data里面的数据用this.xxx是错误的，因为此时this的指向是swiper，要修改data里面的数据就得在return外面定义一个 vm：

 data() {
    let vm = this
    return {
    days: '一',
     swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {
          //this指向swiper
          var sum = this.realIndex
            switch (sum) {
              case 0:
              //vm指向vue对象
                vm.days = '一'
                break
              case 1:
                vm.days = '二'
                break
                //省略相关代码……
          }
        }
	  }
	}
 }

这样子就能在你想要的触发事件里面更新data里面的变量了
swiper返回当前活动块(激活块)的索引
swiper相关事件
swiper切换效果
vue-awesome-swiper的官方示例

趟坑之路皆头发，为了日后方便查阅仅此记录，如有错漏请指出，让我们一起进步！感谢

标签：vue,awesome,vm,days,break,slide,swiper
来源： https://blog.csdn.net/weixin_43840289/article/details/122467080