从一个页面跳转到用swiper写的全屏滚动页面的指定位置

问题背景

案例

我没有自己写一个全屏滚动，就在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选项卡