详情页返回列表内容缓存及定位实现
来源:互联网 发布:动物相机软件 编辑:程序博客网 时间:2024/06/04 19:13
实现目标
当前浏览到第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使用
阅读全文
0 0
- 详情页返回列表内容缓存及定位实现
- h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
- 微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage
- 详情页返回列表页时保持原来的位置
- phpcms v9 list列表页调用文章详情内容
- vue通过滚动行为实现从列表到详情,返回列表原位置
- 【phpcms-v9】phpcms-v9系统中内容详情页登陆后返回页面
- Fragment实现左右新闻列表和详情
- thinkphp 路由实现列表和详情
- 简单实现内容详情的 更多 收起
- Android_实现商品详情的展示页及布局
- Android详情页+定位评论区
- html5的replaceState实现详情页到列表页的无刷新且回到上次位置
- 从翻页条件查询列表及其详情页动态切换,免于条件携带的实现方案
- weex使用日记之列表-详情页
- 详情页组件中的内容变化时,价格如何实现动态变化
- ReactNative分组列表SectionList使用详情及示例详解
- ReactNative分组列表SectionList使用详情及示例详解
- HDU 6141 I am your Father!(最小树形图)
- vue项目中浏览器图标的设置
- bjui关闭当前页及弹窗层,刷新当前页及弹窗层
- Friend-Graph(HDU 3152)
- Qt 学习之路 2(36):二进制文件读写
- 详情页返回列表内容缓存及定位实现
- 去掉alert,confirm弹出框显示的url
- poi操作word文档(替换,插入图片)
- 剑指Offer 面试题14 剪绳子
- 发送手机验证码在activeMQ中简单应用
- 状态真的特别重要
- Python引用其他模块之sys.path
- [bzoj1407][exgcd]Savage
- 云数据库MySQL版快速上手教程