实现目标
当前浏览到第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
