模拟类似应用程序的滑动以在移动网站上切换页面

Question

我最近对微信（威信）的一个前端框架的一个有趣行为感到好奇。

如果您查看 https://weui.io/ 使用 Chrome 的设备工具栏打开，然后 select 第一页列表中的一个元素 - 您会注意到它将您带到新页面而无需重新加载任何页面 + 新页面类型从右到左滑入。

但最有趣的部分是，如果您按下后退按钮（Chrome 浏览器 window 左上角常用的 "back" 按钮，它将带您回到第一页。此外，如果您使用移动设备打开相同的 weui.io，您将能够选择列表中的某些项目，它将再次加载具有这种漂亮幻灯片效果的新页面，然后您只需从左向右滑动到 return 到上一页。所以滑动完全就像在一个APP里一样，我觉得很有趣！

我想在我的网站上构建相同的行为，但无法有效地模拟它。

我的想法是我只是立即加载两个页面，第二个隐藏，然后我根据需要将第二个页面滚动进或滚出，但关键是我需要在整个站点范围内使用这个方法，这种方法对于站点来说非常笨拙-广泛使用。或者，我可以用 AJAX 加载第二页，但它仍然不会给我在移动设备上的滑动效果。

我一直在检查代码，但仍然无法获取涵盖该特定功能的代码部分。

有人在做类似分享经验的事情吗？感谢您的任何想法！

Answer 1

原来很简单：都是关于历史的API（pushstate + popstate - there's also a good CSS-Tricks example 开始）。

无论如何，历史记录 API 可以帮助您模拟 back/forward 按钮的行为，即使您只是这样做也是如此。

$('.some_div').hide() $('.some_other_div').show();

我发现 this post 非常有用 - 几乎开箱即用。

最后，历史记录 API 可以找到浏览器支持 here。

如有任何问题，我们很乐意发表评论 ;)