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: {// 其他页面跳转指定slidesdelay () {// 值得注意的是这里在setTimeout函数如果使用到了this，必须在函数外定义一个变量来暂存this。如果不需要使用this，则不用定义。var self = thissetTimeout(function () {console.log('延时了执行')self.$refs.mySwiper.swiper.slideTo(self.slidesId, 1000, true)}, 500)// 设置回索引0，刷新后created也只会跳转首页window.sessionStorage.setItem('slide', 0)}
}

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

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