问题背景

案例

我没有自己写一个全屏滚动，就在Swiper官网找了Swiper在PC端的全屏页面效果展示

思路

1. 首先把案例拿到本地命名为SwiperPC.html。（CV大法就不需要教了吧？）
2. 现在要写一个页面a.html代码如下：

   <a class="btn" href="SwiperPC.html" target="_blank">点击我进入全屏页面效果展示</a>复制代码

   通过点击a标签跳转到SwiperPC.html指定某个slide位置（例如 索引值为1的slide）

3. 正在思考怎么用slideTo结合回调函数...某位大神提供了一个思路：
   

   于是我就开始的百度本地存储找到了localStorage用法小总结 豁然开朗！

解决方案

• 第一步、 a.html中设置localStorage本地存储

1. 添加点击事件，设置 localStorage自定义 属性 localIndex
2. 注意这里的index类型是string

   <a class="btn" href="SwiperPC.html" target="_blank">点击我进入全屏页面效果展示</a>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script>$(function () {$('.btn').click(function () {/* 存储名字为 localIndex , 值为 1 的变量 如下两种方法 */localStorage.localIndex = 1;// localStorage.setItem("localIndex","1"); // 注意这里的index类型是string 所以不能直接加法运算,稍后处理时候要转为number类型});})
   </script>复制代码

• 第二步、修改案例中的 pcpage.js

1. 设定初始化时slide的索引 initialSlide: index
2. 设定 初始index var index=0;
3. 判断 localStorage里是否保存 localIndex 变量 localStorage.hasOwnProperty("localIndex")，
   如果存在就读取该变量赋值给 index
   index=localStorage.getItem("localIndex");
   因为是localStorage长久保存，所以要主动删除 localStorage.removeItem("localIndex")
   （全文localStorage换成sessionStorage也是可以的）
4. 额外的问题 ，因为这个案例中通过class设置了css3的动画。所以在onFirstInit方法中 根据实际情况对 index 处理一下类型转换 parseInt(index)

   // JavaScript Document
   $(function () {var index=0;var lens = $('.swiper-slide').length;if(localStorage.getItem("localIndex")){index=localStorage.getItem("localIndex"); /* 读取保存在localStorage对象里名为 localIndex 的变量的值 赋值给index */localStorage.removeItem("localIndex"); /* 删除 保存在localStorage对象里的变量 localIndex */}var mySwiper = new Swiper('.swiper-container',{speed:400,mode : 'vertical',resistance:'100%',initialSlide: index, // 设定初始化时slide的索引loop:true,mousewheelControl : true,grabCursor: true,pagination: '.pagination',paginationClickable: true,onFirstInit:function(){console.log(typeof index );/** 1. 此处注意index如果是本地存储的localStorage.getItem("index") 则为字符串类型 需要转为整型 parseInt(index)* 2. parseInt(index) 必须对 lens 取模 否则 本地存储过来的index+1会超出页面数* */var i = (parseInt(index)%lens+1);// $('.swiper-slide').eq(i).addClass('ani-slide');$('.slide'+i).addClass('ani-slide');}});mySwiper.wrapperTransitionEnd(function () {$('.ani-slide').removeClass('ani-slide');$('.swiper-slide').eq(mySwiper.activeIndex).addClass('ani-slide')},true);
   });复制代码

   至此解决了从一个页面跳转到另一个用swiper写的全屏滚动页面的指定位置。若有不对之处或有待改进之处还望不吝赐教！完整案例
   延伸阅读我的另一篇用哈希值判断指定位置的基于swiper的Tab选项卡