問題背景

從一個頁面跳轉(zhuǎn)到用swiper寫的全屏滾動頁面的指定位置，怎么實現(xiàn)啊？

案例

我沒有自己寫一個全屏滾動，就在Swiper官網(wǎng)找了Swiper在PC端的全屏頁面效果展示

若有侵權(quán)請留言告知我更換

思路

首先把案例拿到本地命名為SwiperPC.html。（CV大法就不需要教了吧？）

現(xiàn)在要寫一個頁面a.html代碼如下：<a class="btn" href="SwiperPC.html" target="_blank">點擊我進入全屏頁面效果展示</a>復(fù)制代碼通過點擊a標簽跳轉(zhuǎn)到SwiperPC.html指定某個slide位置（例如 索引值為1的slide）

正在思考怎么用slideTo結(jié)合回調(diào)函數(shù)...某位大神提供了一個思路：
用本地存儲
于是我就開始的百度本地存儲找到了localStorage用法小總結(jié) 豁然開朗！

解決方案

• 第一步、 a.html中設(shè)置localStorage本地存儲

添加點擊事件，設(shè)置 localStorage自定義 屬性 localIndex

注意這里的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 所以不能直接加法運算,稍后處理時候要轉(zhuǎn)為number類型});}) </script>復(fù)制代碼

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

設(shè)定初始化時slide的索引 initialSlide: index

設(shè)定 初始index var index=0;

判斷 localStorage里是否保存 localIndex 變量 localStorage.hasOwnProperty("localIndex")，
如果存在就讀取該變量賦值給 index
index=localStorage.getItem("localIndex");
因為是localStorage長久保存，所以要主動刪除 localStorage.removeItem("localIndex")
（全文localStorage換成sessionStorage也是可以的）

額外的問題 ，因為這個案例中通過class設(shè)置了css3的動畫。所以在onFirstInit方法中 根據(jù)實際情況對 index 處理一下類型轉(zhuǎn)換 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, // 設(shè)定初始化時slide的索引loop:true,mousewheelControl : true,grabCursor: true,pagination: '.pagination',paginationClickable: true,onFirstInit:function(){console.log(typeof index );/** 1. 此處注意index如果是本地存儲的localStorage.getItem("index") 則為字符串類型 需要轉(zhuǎn)為整型 parseInt(index)* 2. parseInt(index) 必須對 lens 取模 否則 本地存儲過來的index+1會超出頁面數(shù)* */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); });復(fù)制代碼至此解決了從一個頁面跳轉(zhuǎn)到另一個用swiper寫的全屏滾動頁面的指定位置。若有不對之處或有待改進之處還望不吝賜教！完整案例
延伸閱讀我的另一篇用哈希值判斷指定位置的基于swiper的Tab選項卡

總結(jié)

以上是生活随笔為你收集整理的从一个页面跳转到用swiper写的全屏滚动页面的指定位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。