现在手机端的网页加载数据,一般都是在滚动到屏幕最下方时加载下一页,但是这样会带来一个问题,就是我点击页面中的链接,然后再回退回来的时候,数据又从第一页开始显示了。
当然,可以通过将当前页码写入storage的方式来存储现场,但是这个样子的话,就会打乱分页的大小(每次请求分页要求返回的条数),感觉不是很优雅,求各路大神好的解决方案。
有回答者说用pushState解决方案,这种方式是不妥的:
我的分页数据是ajax加载的,每次请求下来的数据,追加到p容器中,而不是将容器清空后重新赋值。 即使用pushState来记录一个请求地址,但是你下次再来请求这个地址的时候,和之前记录的那个地址请求返回的数据是不一样的,这次是请求多页的数据,而之前是请求单页的数据。
况且万一做了这种机制,我加载完多个分页后,在当前页后退时,会很诡异,页面的区域在每次后退完成之后仅仅是列表区域数据量减少,这根本就不是想要的结果。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
利用HTML5的新特性 pushState,在每次加载下一页的时候修改url地址栏,回退回来的时候就能知道前一页定位在了哪个页码上。
最简单的,用 hash 定位,即每次下拉触发 hash 变化,例如
location.hash = '!/p=3'; // 3为页码
然后在页面加载时取 hash 并根据获取的值(页码)加载数据
1,新开一个窗口打开连接页面
2,记录当前点击链接的浏览器高度,并且记录当前已经请求的页码。 返回时请求当前页数的数据并让浏览器滚动到记录的高度。
一楼说的是最正确的做法。
利用html5新的History API,github几乎全部用的这玩意。
URL虽然发生了变化,但是其实发的还是ajax请求。国内的有paiwo.co,都有运用到了这种技术。
URL可以发生变化的Pjax请求。
可以用angular做成单页面应用。通过状态路由管理可以避免这个问题。每次回退都相当于回退到历史记录。