设置div为fixed层模拟单页面。点击手机返回键无法返回

移动端的一个项目大致情况是这样的:

clipboard.png

点击车型以后会列出品牌

clipboard.png

再点击则列出车系

clipboard.png

我现在的做法是:

品牌和车系分别做成了一个fixed层浮在的上面,点击的时候则显示出品牌,再点击品牌显示车系,这个时候车系浮在品牌的上面。 这样有一个问题就是,点击手机上的返回键会自己返回到第一张的位置。

跟现在这个http://m.xin.com/evaluate_car存在一样的问题。

听同事说过前端路由的方式,还是不知道怎么写。有没有朋友指教下或者有什么好的前端路由库。

回复
阅读 2.9k
1 个回答

因为手机返回键是根据历史记录来返回的。但你弹出你的浮层,并不会增加历史记录。所以当你按返回键的时候,它就回到第一张的位置啦~

因此如果你想实现点击浮层可以按返回键,就要使用history的pushstate这个api来增加一个历史记录,这样就可以按返回键了~不过按返回键可能会导致重新请求,且后端要进行一些处理(因为返回键是重新请求这个地址,但是有缓存野很快)。不过,经过我的实践,还是不要用这种方式的好,很恶心,有很多东西需要处理(具体你可以试试)。直接浮层用页面的返回按钮就好了。

本来是想写一篇文章记录的。以便跟我一样的后来者能省去找资源的时间。地址在这里:
前端路由的原理和实现。不过最近太懒了,就没有写完。。。(如果需要,可以催我。。。)

不过你可以查看以下文章:

前端:将网站打造成单页面应用SPA(一) - 前端杂谈 - SegmentFault https://segmentfault.com/a/11...

库的话,看我文章吧。下面的那些库名字在github上搜就是啦~(自己动手丰衣足食~)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏