第四篇. vue2.x 中使用vue-awesome-swiper获取当前点击内容的索引

1. 安装swiper 和 vue-awesome-swiper

// 使用vue-awesome-swiper 要先引入swiper
  npm install swiper vue-awesome-swiper

2.引入使用

// 引入插件 此处的s大写 不然会报错
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper.scss";

3. 完整代码

<template>
  <div class="recommendPage">
    <swiper :options="swiperOption" ref="mySwiper">
      <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 >
    </swiper>
  </div>
</template>

<script>
// 引入插件 此处的S要大写 不然会报错
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper.scss";

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: false, // 不要循环 不然多循环出的标签点击无效
        slidesPerView: 5,
      spaceBetween: 30,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        on:{
          // 使用es6的箭头函数，使this指向vue对象
          click: ()=>{
            // 通过$refs获取对应的swiper对象
            let swiper = this.$refs.mySwiper.$swiper;
            console.log(swiper.clickedIndex) //当前点击的索引
          }
        }
      }
    };
  }
};
</script>
<style scoped >
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: pink;
}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>