select下拉框&swiper轮播图

需求：

1、轮播图自动循环切换（开启loop模式：loop：true）

2、下拉框内容与轮播图对应（即v-for的时候使用的同一个数组），当点击下拉框内容的时候，轮播图自动跳转到与之相应的slide,

测试样式如图，其中下拉框内容与轮播图左侧内容一致

完成方法（个人）：

1、return中定义的数组：

 data() {
    return {
　　　 model:"",
      test: [
        { value: 0, name: "测试1", case: "测试用数据"},
        { value: 1, name: "测试2", case: "测试用数据" },
        { value: 2, name: "测试3", case: "测试用数据" },
        { value: 3, name: "测试4", case: "测试用数据" },
        { value: 4, name: "测试5", case: "测试用数据" },
        { value: 5, name: "测试6", case: "测试用数据" },
        { value: 6, name: "测试7", case: "测试用数据" },
        { value: 7, name: "测试8", case: "测试用数据"},
        { value: 8, name: "测试9", case: "测试用数据" },
        { value: 9, name: "测试10", case: "测试用数据" },
        { value: 10, name: "测试11", case: "测试用数据" },
        { value: 11, name: "测试12", case: "测试用数据" },
        { value: 12, name: "测试13", case: "测试用数据" },
        { value: 13, name: "测试14", case: "测试用数据" },
        { value: 14, name: "测试15", case: "测试用数据" },
        { value: 15, name: "测试16", case: "测试用数据" },
        { value: 16, name: "测试17", case: "测试用数据" },
        { value: 17, name: "测试18", case: "测试用数据" },
        { value: 18, name: "测试19", case: "测试用数据" },
        { value: 19, name: "测试20", case: "测试用数据" },
      ],
    };
  },

2、下拉框代码（别忘了在data里面定义v-model）：

          <Select v-model="model" class="Ctr_style">
            <Option
              @click.native="SelectFn(item)"
              v-for="(item,index) in test"
              :value="item.value"
              :key="index"
            >{{item.name}}</Option>
          </Select>

3、轮播图代码：

  <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,index) in test" :key="index">
          <div class="swiper_content_left">{{ item.name }}</div>
          <div class="swiper_content_right">{{ item.case }}</div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

ps:个人建议在设置“：key”的时候不要嫌麻烦，在v-for里同时加上index，用“ :key="index" ”，这样可以避免出现冲突，使用其他的元素当key，万一其他数组中存在一样的元素怎么办？但是索引就不同了，每个数组元素的索引都是唯一的

4、轮播图配置项

     // 轮播图配置
      swiperOptions: {
        direction: "vertical",
        loop: true,
        // loopAdditionalSlides: 9,
        initialSlide: 0,
        slidesPerView: 5, //显示几个
        slideToClickedSlide: true, //点击是否active
        centeredSlides: true, //active是否为中间
        observeParents: true,
        observer: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 2000,
        },
        on: {
          click: () => {
            // 通过$refs获取对应的swiper对象
            let swiper = this.$refs.mySwiper.$swiper;
            console.log(this.$refs.mySwiper.$swiper)
            // 读取数组中每个元素的index
            let i = swiper.realIndex;
             console.log(i,"swiper")
          },
        },
      },

当你点击轮播图中任意slide时，配置项中的console打印结果如下图

其中在第一条中我们可以找到

这个realIndex，也就是我们要用到的。

ps：看到配置项最后那个

 on: {
          click: () => {
            // 通过$refs获取对应的swiper对象
            let swiper = this.$refs.mySwiper.$swiper;
            console.log(this.$refs.mySwiper.$swiper)
            // 读取数组中每个元素的index
            let i = swiper.realIndex;
             console.log(i,"swiper")
          },
        },

了吗？这里是写轮播图点击事件的，如果你点击轮播图slide的时候需要执行其他事情，可以将方法写着这里面

5、说实话这一步为啥我还没搞清楚，但是没有这一步还不行

  computed: {
    swiper() {

return this.$refs.mySwiper.$swiper;

    },
  },

ps：不进行这一步会出现的错误

6、下拉框点击事件

methods: {

SelectFn(item) {

console.log(item, "下拉框");

this.reindex = item.value;

this.swiper.slideToLoop(this.reindex, 1000, false);

console.log(this.$refs.mySwiper);

由于swiper配置项中使用了Loop，所以跳转的时候应当使用slideToLoop
slideToLoop是根据realIndex进行跳转
slideTo是根据activeIndex进行跳转
由于我设置的是显示5个，所以realIndex和activeIndex之间相差数值5，如果想要使用slideTo，那么需要在第六步获取到的item.value的基础上再加5，当然加的这个数值的大小取决于你显示设置的大小，如果你设置的是显示4，那么就加4，以此类推

//使用slideTo  
 SelectFn(item) {
      console.log(item.value, "下拉框");
      this.reindex = item.value+5;
      this.swiper.slideTo(this.reindex, 1000, false);
      console.log(this.reindex, "slideTo");
    },