vue使用swiper--跳转到指定swiper-slide(从下标0开始计数)

需求：监听页面滚动事件，当页面到达锚点区域时触发事件，Swiper展示指定的swiper-slide

实现：

1. 添加滚动事件，监听页面滚动事件，对相应模块绑定锚点（这里用id）
2. 滚动事件结束满足判断条件，拿到**mv**的swiperTwo()方法
3. 执行函数： vm.swiperThree().slideTo(index, 1000, false);

官方讲解 mySwiper.slideTo(index, speed, runCallbacks)

 <!-- Swiper -->
    <div class="swiper-container gallery-thumbs thumb-item1" ref="swiper">
      <div class="swiper-wrapper top_case ">
        <div class="swiper-slide flexcc">
        1
        </div>
        <div class="swiper-slide flexcc">
            2
        </div>
        <div class="swiper-slide flexcc">
            3
        </div>
      </div>
    </div>
    <!-- Swiper -->
    <div class="swiper-container gallery-top loupe-course1" id="8">
      <div class="swiper-wrapper">
            <div class="swiper-slide">
                测试1
             </div>
                <div class="swiper-slide">
                测试2
             </div>
                <div class="swiper-slide">
                测试3
             </div>
        </div>
       </div>

var vm = new Vue({
  el: '#app',
  mounted() {
    var _this = this
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll, false)
    var timer = setInterval(function () {
      // 判断文档和所有子资源(图片、音视频等)已完成加载
      if (document.readyState === 'complete') {
        //执行方法
        _this.swiperTwo()
        window.clearInterval(timer)
      }
    }, 2000)
  },
  beforeDestroy() {    //在加载时添加了scroll监听，如果不销毁，到下一个页面时，没有主动销毁，会报错'offsetTop' of undefined。因此，需要在页面跳转前销毁此监听
    window.removeEventListener("scroll", this.onScroll)
  },
  methods: {
    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.scroll')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      this.isActive = navIndex
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      $('html').animate({
        scrollTop: $('#' + idNum).offset().top - scrollHeight
      }, 800, function () {
        this.isActive = index;
        //切换到指定slide，速度为1秒
        if (index > 4 && index < 11) {
          _this.swiperTwo().slideTo(index - 6, 1000, false)
        }
        if (index > 8) {
          _this.swiperThree().slideTo(index - 9, 1000, false)
        }
      });
    },
    swiperTwo() {
      var galleryThumbs = new Swiper('.thumb-item1', {
        slidesPerView: 3,
        spaceBetween: 8,
        loop: false,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        on: {
          click: (swiper) => {
            let slide = swiper.clickedIndex;//获取当前下标
            if (slide > 1) {
              $('.thumb-item1 .swiper-wrapper').css({
                'transform': 'translate3d(-1.5rem,0,0)',
                'transition-duration': '1s'
              });
            } else {
              $('.thumb-item1 .swiper-wrapper').css({
                'transform': 'translate3d(0,0,0)',
                'transition-duration': '1s'
              });
            }
          },
        }
      });
      var galleryTop = new Swiper(".loupe-course1", {
        spaceBetween: 0,
        loop: false,
        autoplay: false,
        thumbs: {
          swiper: galleryThumbs
        }
      });
      return galleryTop;
    },
  },

})