實現目標
當前瀏覽到第N頁，點擊某一個新聞，進入新聞詳情頁，點擊返回時，列表數據不重新加載，焦點仍定位在進入詳情頁之前的位置。
思路
- 緩存列表內已展示的數據；
- 進入詳情頁時在緩存內添加該新聞的ID（鍵為articleId）；
- 返回時在js內判斷緩存內是否包含articleId，如果存在，則通過緩存的列表數據進行頁面渲染；
- 通過articleId定位元素，滾動窗口值該元素處；
- 緩存不能始終存在。
根據當前項目情況，考慮緩存放入sessionStorage，滾動窗口使用IScroll。
實現方案
1、緩存列表數據
//cacheKey 緩存key cacheValue 緩存內容json結構 position 值為before和after分別用于加載最新和加載下一頁
function addToCache(cacheKey,cacheValue,position){
cacheValue = JSON.stringify(cacheValue);
var allCacheData = sessionStorage.getItem(cacheKey);
if(allCacheData != null){
if(position == "before"){
allCacheData = cacheValue + "::::" +allCacheData;
} else {
allCacheData = allCacheData + "::::" + cacheValue;
}
} else {
allCacheData = cacheValue;
}
sessionStorage.setItem(cacheKey,allCacheData);
}
- sessionStorage只能存儲字符串，需要將json結構的對象轉為字符串進行存儲
- 如果列表數據特別多，應該和業務確認緩存數據條數，截取僅是字符串操作，這里不再展開
2、進入詳情頁
$(".article").click(function(){
sessionStorage.setItem("articleId",$(this).attr("id"));
})
- 在每條新聞上綁定事件，點擊時設置文章ID至緩存，正常來說在詳情頁設置，但是因為這個項目內的詳情頁不是我們部門的，所以只能在列表頁設置；
3、返回時列表內js判斷是從詳情頁返回的還是一次新的訪問
var articleId = sessionStorage.getItem("articleId");
var cacheData = sessionStorage.getItem($scope.initType);
if(articleId != null && cacheData != null){ //從詳情頁返回且列表緩存數據不為空
showTableDataWithCache(cacheData,articleId);
removeCache("articleId");//注意使用一次就清理掉
}else { //一次新的訪問，要清理掉所有相關緩存
removeAllFuturesCache();
loadPage(1);
}
4、定位至對應元素
//注意IScroll需要重新初始化
myScroll = new IScroll('#wrapper', {
probeType: 3,
disableMouse: true,
momentum: true,
mouseWheel: true,
disablePointer: true,
click: true,
tap: true,
resizePolling: 1,
// x
});
//滾動至對應元素
myScroll.scrollToElement(document.querySelector("[id='"+detailArticleId+"']"),10,true,true);
initScroll();
myScroll.refresh();
- 注意IScroll需要重新初始化;
- scrollToElement的選擇器格式是[id='articleId']而不是正常的"#articleId";10 是動畫時間 true true這樣設置會將元素顯示在窗口中間；
總結
- sessionStorage是單個窗口級的緩存，同一個窗口內的數據可緩存在其內；
- IScroll可以作為頁面滾動的組件；
- 詳情頁返回列表不刷新問題可以分解為三個小問題：
- 緩存列表數據
- 添加從詳情頁返回的標記（文章詳情ID）
- 用緩存數據渲染頁面后滾動窗口至對應元素
通過sessionStorage存儲數據，這樣很多功能都可以實現，比如返回時標簽選中等都是一樣的思路，進入詳情頁時設置對應值，在頁面加載時判斷對應的緩存數據是否存在進而展開業務，這里不再展開。
參考：
sessionStorage介紹
IScroll使用
個人博客,歡迎來訪！
www.onecoderspace.com
