從一個頁面跳轉到用swiper寫的全屏滾動頁面的指定位置

問題背景

從一個頁面跳轉到用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選項卡