swiper跳转指定slides

当然分页器，可以实现这个功能，但是如果想在菜单栏实现就需要别的方法了。

Template

      <ul>
        <li  @click="toslide(0)">首页</li>
        <li  @click="toslide(1)">文章</li>
        <li  @click="toslide(2)">友链</li>
        <li  @click="toslide(3)">关于</li>
      </ul>

使用点击方法传递slides的索引，

注意：loop模式下的索引是对不上的，还没研究过

Methods

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

我的siper-slide是组件化的方法初始化的，所以需要调用swiper的实例slideTo实现索引跳转

正常的可以到 Swiper官网查看 https://www.swiper.com.cn/api/methods/417.html，一样可以实现slides跳转

其他路由跳转指定slides

这个比较难搞，研究了我好久，需要考虑到swiper的初始化问题

索引传参的方法，我使用了sessionStorage的方法来存储

其他页面的跳转回swipers页面，并保存值

其他页面的Template

      <ul>
        <li  @click="toslide(0)">首页</li>
        <li  @click="toslide(1)">文章</li>
        <li  @click="toslide(2)">友链</li>
        <li  @click="toslide(3)">关于</li>
      </ul>

其他页面的Methods

    toHome (num) {
      window.sessionStorage.setItem('slide', num)
      this.$router.push('home')
    }

Swiper的初始化问题

我将Vue的一些生命周期执行打印了出来，发现swiper的初始化，比其他的都要晚，

意味着获取到索引但是却执行不了swiper的跳转，因为swiper还没有初始化完成。

本人又是小白，swiper官网找了好久也没找到swiper初始化后可以执行的事件

最后只能使用延时执行，延时执行属于异步，同步执行完才到异步，所以没问题啦

JS

data(){
 return{ 
  slideId: 0
}  
},
created(){
    this.slidesId = window.sessionStorage.getItem('slide')   //获取索引
    this.delay(this.slidesId)    //执行延时方法，并传递索引
},
methods: {
        // 其他页面跳转指定slides
    delay () {
      // 值得注意的是这里在setTimeout函数如果使用到了this，必须在函数外定义一个变量来暂存this。如果不需要使用this，则不用定义。
      var self = this
      setTimeout(function () {
        console.log('延时了执行')
        self.$refs.mySwiper.swiper.slideTo(self.slidesId, 1000, true)
      }, 500)
      // 设置回索引0，刷新后created也只会跳转首页
      window.sessionStorage.setItem('slide', 0)
    }
}

  

设置了0.5秒的延时，效果来说，并不影响体验，网上没找到类似的方法，记录一下。

出于解决问题的思路去做，并没有考虑太多方面的问题，大神们有更好的方法也可以分享出来