浏览器返回按钮问题

Question

手机端无限下拉加载列表，当点击列表一项到详情页（这又是一个新页面）。
当在详情页点击返回时如何返回到列表页点近来时的状态？

Answer 1

手机端无限下拉加载列表，看起来这是靠ajax请求做的，除非你拉到底下之后整个页面都刷新，连地址栏的url都变了。

手机以及PC浏览器的返回（正确的讲应该是后退）是返回上一个网址，history.back()，只与你地址栏的地址有关系。

现在假设你的列表页是Url-list，你的详情页A是Url-detail-A，详情页A在列表页的位置是#A。
那么当你在Url-detail页面点击返回时，浏览器就会回退到Url-list，这个时候不同的浏览器在不同的情况下就会有不同的问题。

简单来讲，如果你的页面够小手机内存够大，那么浏览器（尤其是微信内置浏览器）能把你的上一页的访问情况全部缓存下来，不再做新的请求。然而一般来讲微信的页面缓存就特不正经，就有可能全部都要重新请求，那么你上一页的访问位置都会丢，因为整个页面数据都重新请求重新渲染了。

比较简单的办法就是：
当点击列表一项到详情页后退回到上一页时，不是返回Url-list，而是Url-list#A，这样就能实现你的需求。只不过做起来会比较恶心。

新浪微博PC网页版就是这么做的，你可以试一试。

Answer 2

这个问题跟“浏览器返回按钮”可以说关系不大。

有的浏览器是支持，返回不重新刷新的(其实也不是不刷新，而是不重新渲染，主要是一些移动端浏览器)。但是通常会重新渲染操作。

如果设计到重新渲染，那么你就需要知道当前需要渲染的数据，也就是需要有一个标记。也就是你说的，怎么记录列表点击进来时的状态。

通常的处理是通过history的pushstate,popstate更改url地址，当然如果你要通过cookie之类的存储也是可以的。

当然这里只是简单说了实现的方式，不会说细节。其实，在处理细节的时候，你还会遇到其他的一些问题。比如，是否标记通过数字来标记，1，2，3，4，5，当前是第5页，是否需要加载前面的4页？加载怎么处理，不加载怎么处理？哪种体验更好？等等。

其实本质是对状态和数据缓存的操作，这个不多说，需要你自己去处理。

Answer 3

列表页请求的数据都是有分页的吧，那只要点击返回的时候直接到page=1的那一页就好，即请求page=1的那个列表接口