Vue Swiper 横纵向滑动+页面索引跳转

 Swiper组件确实是个好东西啊。

结合最近所学，做了个Swiper 横纵向滑动+页面索引跳转的小页面。

直接上图：

swiper引入到Vue 就不多说了，直接参考官网。

首先理清思路：纵向的swiper包含横向的swiper，右上角的页面索引控制纵向的swiper并同步。

页面布局：

<template>
  <div class="main">
    <!-- 索引竖线 -->
    <div class="nav" style="float: right;margin-right: 50px;position:absolute;top: 0;right: 0;color: white; z-index:2;border-left: 1px solid #909399 ">
     <!-- 索引小圈圈，会随着纵向的swiper改变而改变位置 -->
    <img src="https://data.ehometd.com/files/1/25/729/4689.1561463870.png?v=36099" style="width:14px;height:14px;position:absolute;left:-8px;transition:top 1s " :style="{top:top+'px'}" >
      <ul style="float: right;margin-left:10px">
        <!-- 根据当前纵向的总数量for出索引按钮，索引按钮会根据点击与选择改变样式 -->
        <li v-for="item,index in li" class="item" :class="{'active': nowIndex===index}" @click="openswiper(index)">
          {{item}}
        </li>
      </ul>
    </div>
    <!-- 纵向swiper -->
    <swiper :options="VOption" ref="mySwiper" @chan>
      <swiper-slide v-for="item in num">
        <!-- 横向swiper -->
        <div align="center">
          <swiper :options="HOption">
          <swiper-slide v-for="items in item.img"><img v-bind:src="items"></swiper-slide>
          <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </swiper-slide>
      <div class="swiper-pagination swiper-p1" slot="pagination"></div>
    </swiper>

  </div>

</template>

逻辑：

<script>

   export default {
    data() {
      var _this=this;
      return {

        top:28,
        nowIndex:0,
        // 纵向swiper内容
        li:["家装四大陷阱","家装陷阱一","家装陷阱二","家装陷阱三","家装陷阱四"],
        // 横向swiper内容
        num:[
          {
            img:['https://data.ehometd.com/files/1/25/729/4678.1561455224.png?v=53243']
          },
          {
            img:['https://data.ehometd.com/files/1/25/729/4673.1561455184.png?v=53243','https://data.ehometd.com/files/1/25/729/4674.1561455187.png?v=53243',"https://data.ehometd.com/files/1/25/729/4675.1561455190.png?v=53243","https://data.ehometd.com/files/1/25/729/4676.1561455193.png?v=53243","https://data.ehometd.com/files/1/25/729/4677.1561455197.png?v=53243"]
          },
          {
            img:['https://data.ehometd.com/files/1/25/729/4679.1561455976.png?v=80589','https://data.ehometd.com/files/1/25/729/4680.1561460790.png?v=2013',"https://data.ehometd.com/files/1/25/729/4681.1561460792.png?v=2013","https://data.ehometd.com/files/1/25/729/4682.1561460795.png?v=2013","https://data.ehometd.com/files/1/25/729/4683.1561460798.png?v=2013"]
          },
          {
            img:['https://data.ehometd.com/files/1/25/729/4670.1561455015.png?v=2013','https://data.ehometd.com/files/1/25/729/4671.1561455018.png?v=2013',"https://data.ehometd.com/files/1/25/729/4684.1561460801.png?v=2013","https://data.ehometd.com/files/1/25/729/4685.1561460804.png?v=2013","https://data.ehometd.com/files/1/25/729/4686.1561460806.png?v=2013"]
          },
          {
            img:['https://data.ehometd.com/files/1/25/729/4672.1561455022.png?v=53243']
          },
         
        ],
        // 纵向swiper初始参数
        VOption: {
          // 方向
          direction: 'vertical',
          // 同时显示数量
          slidesPerView: 1,
          // 初始页面
          initialSlide :0,
          // 滑动距离多少才执行，对于同时有横纵向特别重要
          threshold : 50,
          // 循环
          loop:true,
          // 这里是滑动后索引的同步
          on: {
            slideChangeTransitionStart: function(){
               _this.nowIndex=this.realIndex
               _this.top=_this.nowIndex*36+28;
               
              console.log(this.nowIndex)

                   }
              },
          // 分页器导航
          pagination: {
            //el: '.swiper-p1',
            clickable: true
          }
        },
        HOption: {
          slidesPerView: 1,
          spaceBetween:30,
          threshold : 10,
          loop:true,

          pagination: {
            el: '.swiper-pagination-bullets',
            clickable: true,
            dynamicBullets: true,
            dynamicMainBullets: 2,
            // 切换成数字模式
             renderBullet(index, className) {
               return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
             }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    computed:{
      // 初始化获得swiper
      swiper(){
        return this.$refs.mySwiper.swiper;
      }
      
    },
    methods:{
      // 索引跳转方法
      openswiper(index){
        // console.log('a');
        // console.log(this.swiper.activeIndex);
        this.swiper.slideTo(index+1, 1000, false);
        this.top=index*36+28;
        this.nowIndex=index     
      }

    }

  }


</script>

样式：

<style>
.item{
  line-height: 36px;
  letter-spacing: 2px;
  list-style: none;

}
body{
  margin: 0 auto;
  background:#1a1a1a;
}
ul{
  padding: 0px ;
  padding-left: 10px
}
img{
  /*width: 100%;*/
  height: 100%;
}
.active{
  color: #c5a36e;
}
.main{

  width: 100%;
  height: 100%


}
.my-bullet-active{


}
.swiper-container {
    width: 100%;
    height: 100vh;
}  
.swiper-pagination-bullet-custom {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    /*background: rgba(0,0,0,0.2);*/
  }
  .swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
    color: #fff;
    background: #c5a36e;
  }
</style>