vue+swiper,【vue-awesome-swiper插件】实现页面“试题”内容左右滑动的切换；获取插件的activeIndex下标值 / realIndex；点击跳转到对应的index页面

1、安装vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

 2、引入

（1）全局在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

（2）局部引入

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    components: {
       Swiper,
       SwiperSlide
    }
}
​

3、示例

<template>
  <div>
    <swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
        <swiper-slide class="swiper-slide" :style="swiperStyle" v-for="(item,index) in stepActive" :key="index" :ref="'item'+item" >
          <!-- 添加试题内容区域 -->
          <div @click="setTranslate(index)">
            {{item}}
            <img src="@/assets/home/video_bgs.png" alt="">
          </div>
        </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// 引入swiper滑动组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperStyle: {},
      swiperOptions: {
        slidesPerView: 'auto',
        freeMode: false, // 随意拖动位置
        mousewheel: true
      },
      stepActive: 6
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  watch: {
    stepActive: {
      handler (newVal, oldVal) {
        console.log(this.stepActive)
        if (this.stepActive) {
          // this.swiperStyle = 'width:' + 2000 * this.stepActive / 16 + 'px' // 动态设置宽度
          this.swiperStyle = 'width:' + 2000 + 'px' // 动态设置宽度
        }
      },
      immediate: false
    }
  },
  destroyed () {
    this.swiper.destroy(false)
  },
  methods: {
    setTranslate (index) {
      console.log(index, this.swiper.width, this.$refs['item' + index][0].getBoundingClientRect())
      this.swiper.setTransition(500)// 设定过渡的时间
      this.swiper.setTranslate(0 - 3000 * (index - 1) + (this.swiper.width / 2 - 2000 / 2))// 设定位移，可以为正数
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  .swiper-wrapper {
    transition: all 0.5s;
  }
  .swiper-slide {
    // 内容
  }
}
</style>

注意啦~，安装时，此处有坑

找不到swiper.css，那就安装个swiper呗 ，但是，安装时没有带版本，npm默认给你装的是swiper6，文件夹里的路径跟swiper4都不一样

指定版本号安装

npm install vue-awesome-swiper@3 --save-dev

 版本: vue@2.5.2，vue-awesome-swiper@3.1.3

// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

获取插件的realIndex下标值（2种方法）

方法一

坑1：官方文档，this.$refs.mySwiper.$swiper 的写法有问题，在全局引入根本拿不到，将其改为this.$refs.mySwiper.swiper

错误写法：

正确写法：

computed: {
  swiper () {
    return this.$refs.mySwiper.swiper
  }
}

坑2：监听 @slideChange="slideChange"，在slideChange事件中，使用 this.$refs.mySwiper.swiper 取不到，将其改为 this.$refs.mySwiper.$swiper 即可

<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions" @slideChange="slideChange">
  <swiper-slide class="swiper-slide" v-for="(eng,engId) in engList" :key="engId" :ref="'item'+eng">
      <img :src="eng.image" />
  </swiper-slide>
</swiper>

methods: {
  slideChange () {
    let swiperIndex = this.$refs.mySwiper.$swiper.activeIndex
    console.log('下标', swiperIndex)
  }
}

方法二 

<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
  <swiper-slide class="swiper-slide" v-for="(eng,engId) in engList" :key="engId" :ref="'item'+eng">
      <img :src="eng.image" />
  </swiper-slide>
</swiper>

data () {
    const self = this
    return {
      swiperOptions: {
        slidesPerView: 'auto',
        freeMode: false, // 随意拖动位置
        mousewheel: false,
        on: {
          slideChange () {
            var index = this.activeIndex
            self.slideChange(index)
          }
        }
      }
   }
}

methods: {
    slideChange (index) {
      console.log('下标', index)
    }
}

点击跳转到对应的index页面

其中如果需要用到这一插件进行跳转的话，只能用其对用的下标 “index” 进行，下面传下标就能跳转了

changeIndex (index) {
   this.$refs.mySwiper.$swiper.slideTo(index, 1000, true)// 切换到第一个slide，速度为1秒
},

禁止手动左右滑动的操作

只需要在 swiper-slide 标签上加上class样式名（swiper-no-swiping）即可

<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
  <swiper-slide class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></swiper-slide>
</swiper>

数据量大操作卡顿不够流畅的话，可将 swiper-slide标签 修改为  swiper-item标签

<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
  <swiper-item class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></swiper-item>
</swiper>

避坑，直接换成swiper-item会提示报错

 解决方法：swiper-item标签不支持h5，将swiper-item修改成div+类名

<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
  <div class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></div>
</swiper>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~