27
2017
09

详情页返回列表内容缓存及定位实现

实现目标

当前浏览到第N页,点击某一个新闻,进入新闻详情页,点击返回时,列表数据不重新加载,焦点仍定位在进入详情页之前的位置。

思路

  1. 缓存列表内已展示的数据;
  2. 进入详情页时在缓存内添加该新闻的ID(键为articleId);
  3. 返回时在js内判断缓存内是否包含articleId,如果存在,则通过缓存的列表数据进行页面渲染;
  4. 通过articleId定位元素,滚动窗口值该元素处;
  5. 缓存不能始终存在。

根据当前项目情况,考虑缓存放入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这样设置会将元素显示在窗口中间;

总结

  1. sessionStorage是单个窗口级的缓存,同一个窗口内的数据可缓存在其内;
  2. IScroll可以作为页面滚动的组件;
  3. 详情页返回列表不刷新问题可以分解为三个小问题:
    1. 缓存列表数据
    2. 添加从详情页返回的标记(文章详情ID)
    3. 用缓存数据渲染页面后滚动窗口至对应元素
      通过sessionStorage存储数据,这样很多功能都可以实现,比如返回时标签选中等都是一样的思路,进入详情页时设置对应值,在页面加载时判断对应的缓存数据是否存在进而展开业务,这里不再展开。

参考:
sessionStorage介绍
IScroll使用

上一篇:Android7.0 CTS 测试环境搭建 及CTS测试套件 下一篇:Xamarin.forms:(Rg.Plugins.Popup)Nuget包的使用小案例