javascript - 关于在手机网页中使用下拉加载下一页的数据加载方式时如何优雅的处理后退操作的问题
阿神
阿神 2017-04-10 16:41:19
[JavaScript讨论组]

现在手机端的网页加载数据,一般都是在滚动到屏幕最下方时加载下一页,但是这样会带来一个问题,就是我点击页面中的链接,然后再回退回来的时候,数据又从第一页开始显示了。
当然,可以通过将当前页码写入storage的方式来存储现场,但是这个样子的话,就会打乱分页的大小(每次请求分页要求返回的条数),感觉不是很优雅,求各路大神好的解决方案。

有回答者说用pushState解决方案,这种方式是不妥的:
我的分页数据是ajax加载的,每次请求下来的数据,追加到p容器中,而不是将容器清空后重新赋值。 即使用pushState来记录一个请求地址,但是你下次再来请求这个地址的时候,和之前记录的那个地址请求返回的数据是不一样的,这次是请求多页的数据,而之前是请求单页的数据。
况且万一做了这种机制,我加载完多个分页后,在当前页后退时,会很诡异,页面的区域在每次后退完成之后仅仅是列表区域数据量减少,这根本就不是想要的结果。

阿神
阿神

闭关修行中......

全部回复(5)
PHP中文网

利用HTML5的新特性 pushState,在每次加载下一页的时候修改url地址栏,回退回来的时候就能知道前一页定位在了哪个页码上。

PHP中文网

最简单的,用 hash 定位,即每次下拉触发 hash 变化,例如 location.hash = '!/p=3'; // 3为页码
然后在页面加载时取 hash 并根据获取的值(页码)加载数据

大家讲道理

1,新开一个窗口打开连接页面

2,记录当前点击链接的浏览器高度,并且记录当前已经请求的页码。 返回时请求当前页数的数据并让浏览器滚动到记录的高度。

迷茫

一楼说的是最正确的做法。
利用html5新的History API,github几乎全部用的这玩意。
URL虽然发生了变化,但是其实发的还是ajax请求。国内的有paiwo.co,都有运用到了这种技术。

URL可以发生变化的Pjax请求。

迷茫

可以用angular做成单页面应用。通过状态路由管理可以避免这个问题。每次回退都相当于回退到历史记录。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号