详情页返回列表页实现定位和缓存

实现目标

浏览列表页面，点击进入详情页面，当从详情页面返回时，页面能定位到进入详情页时的位置，同时加载之前的缓存。

实现思路

当点击某个列表进入详情时，获取当前列表距离顶部的高度，并存入浏览器缓存，返回时判断是否存在该缓存，如果存在则加载该浏览器高度，实现定位到进入时的位置。

实现方法


<ul><li><a onclick="godetail(1)"></a></li><li><a onclick="godetail(2)"></a></li><li><a onclick="godetail(3)"></a></li><li><a onclick="godetail(4)"></a></li><li><a onclick="godetail(5)"></a></li><li><a onclick="godetail(6)"></a></li><li><a onclick="godetail(7)"></a></li><li><a onclick="godetail(8)"></a></li><li><a onclick="godetail(9)"></a></li><li><a onclick="godetail(10)"></a></li>
</ul>

function godetail(id) {sessionStorage.setItem("articleId", $(window).scrollTop());//获取滑动高度存入缓存location.href = "Detail?id=" + id;
}//返回的时候判断
var articleId = 0;
if (sessionStorage.getItem("articleId") != null) {articleId = sessionStorage.getItem("articleId");sessionStorage.removeItem("articleId");//注意使用一次就清理掉
}
$(window).scrollTop(articleId)//设置滑动的高度

详情页返回列表页实现定位和缓存相关推荐

vue页面详情页返回列表页_vue 详情页返回列表页，保留列表页之前的筛选条件...
需求背景再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件. 之前的实现方法路由跳转的时候,把筛选条件json对象放到query中去,传到详 ...
vue实现详情页返回列表页，数据不加载且页面原有位置不变
常见的需求: 列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置). 1.实现页面的不重新加载使用vue的keep-alive ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
VUE项目（单页面）问题之：从详情页返回列表页时返回到上次滚动位置，并还原列表页所有点击、搜索等状态
一.问题新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态. 二.经过刚开始,用 this.$router.push({name: 'detailsPage', ...
React项目，从详情页返回列表页时，保存数据并返回到原来的位置
移动端开发时会遇到在列表页点击进入详情,返回后列表页刷新的情况,对用户体验很不友好. 解决方案:使用 react-keeper 完成路由的分配,以及页面组件的缓存 react-keeper 详情参考: ...
uniapp 小程序video列表页解决 ios 详情页返回列表页，列表页重载问题。
安卓手机不用考虑,但是在ios系统,会出现详情返回列表,列表页会重载0 首先官方推荐video 列表不超过3个video组件,再次我们用image代替video,点击是在切换出video插件. ` / ...
vue页面详情页返回列表页_vue列表页进入详情页，返回列表项不刷新
功能像搜索功能,在点击某项进入详情页,再回到搜索界面,如果不做特殊处理,初始化到原来的状态,在vue中可以使用keep-alive缓存搜索界面,达到数据不刷新的结果. 思路在搜索路由对象的meta ...
vue页面返回上一级页面不刷新，数据还在（详情页返回列表页）
1. 配置路由缓存 component: () => import('views/entrance/index')}, {path: '/seniorList',name: 'list',tit ...
vue从其它页面返回_vue---详细页点返回列表页，停留在原先位置
列表页面,点击进入到详情页面,在详情页面向下滑动时,滚动条变化,document.documentElement.scrollTop变化,点击返回按钮时,列表页面的document.documentE ...

详情页返回列表页实现定位和缓存

详情页返回列表页实现定位和缓存相关推荐

最新文章

热门文章