非spa应用列表跳转详情后再返回位置不变

今天写一个厉害了的方法,最近给公司写项目,涉及到一个很常见的问题,那就是列表页跳转详情页之后怎么保证列表页一切不变,数据不变,位置不变?单页面应用当然很好解决,把详情页写成子路由,监控路由,返回时销毁子页面就可以了,那么如果不是单页面应用呢?我司目前这个项目是html+css+jquery,并且一个页面里有左右滑动的列表(有很多大分类),还有查看更多的按钮,查了很多资料,大概有两种比较好的方法:
(1)当点击每条列表时向sessionStorage里存入当前选中的item(某个分类)、滚动条滑动的距离,目前加载了的条数,当返回列表页时,取出sessionStorage里的这些值,重新获取数据然后scrollTop定位到之前的位置,一个不太好操作的是,我们必须等到数据全部加载完成再scrollTop定位,即

如果之前加载了很多很多数据,time写多少就很难控制。
(2)一个推荐的方法,我在写的时候觉得单页面应用处理这个问题的思路特别好,就想非单页面是否能使用同样的思路解决问题,于是我想到了使用弹出iframe层覆盖原列表页面,但当在详情页时,如果点击返回,就无法返回列表页,而是返回了列表页的前一页,(因为现在还是在列表页,详情页只是一个弹出层),如何让看详情页时点击浏览器的返回按钮只关闭弹窗不后退呢,这时我想到了锚点,由于在网址后添加#不会出现网页的重新加载,就实现了我们只关闭详情页不加载列表页数据的想法,搜了一下,解决办法如下:
结构改为:

在点击每条列表时存下要跳转的地址,使用window.location.hash增加一个浏览记录,替代当前详情页,(#后面加什么都可以,只是为了占一个浏览记录),使用layer弹出iframe层,即到了详情页

返回时,点击浏览器返回按钮

当地址变化时触发关闭layer弹出层的操作,回到了列表页的界面。
简单方便,真的很好用!


发现这个只能在pc用,iframe层太不兼容了吧!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复