标签：vue awesome vm days break slide swiper

需求场景：
在项目中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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。