thinkpphp框架中，在列表页使用ajax实现“点击加载更多”，如何做到返回不重新加载数据？

Question

场景大概是这样的：

一个列表页，初次打开列出比如 10 个多商品，通过“点击加载更多”，来加载更多商品（每次加载 10 个商品）。然后点击商品会进入“商品详情页面”。

问题是，从“商品详情页面”后退到“列表页”的时候，列表页还是初次打开的那 10 个商品，之前点击“点击加载更多”出来的数据没了（又需要再次点击加载更多），以致于用户都不知道我浏览到了哪一个商品了，每次返回都要重新加载。

我希望的结果是，后退的时候，“列表页”依然是上一次的状态。这样我就知道我浏览到了哪里。以及可以继续浏览后面的内容。

效果可以参考下京东手机版搜索页面那样
https://so.m.jd.com/ware/sear...

Answer 1

history.pushState 了解一下

其实需要做的就是保存之前的列表，以及滚动位置。这样的话。每次拉回来的数据都存在localstroage里面,performance.navigation.type判断是后退的话，就去拿数据

Answer 2

楼上说的没错，还有个办法就是在打开商品详情的时候不要新打开一个页面，而是在本页面加载出一个图层（z-index）置于列表页之上，然后点关闭时销毁这个图层。