模仿app-like滑动以在移动网站上切换页面

时间:2017-10-16 05:15:05

标签: javascript jquery css zepto wechat

我最近对WeChat(威信)的一个前端框架的有趣行为感到好奇。

如果您使用Chrome的设备工具栏切换来查看https://weui.io/,然后在第一页上的列表中选择一个元素 - 您会注意到它会将您带到没有任何页面的新页面从右到左重新加载+新页面的幻灯片。

但最有趣的部分是,如果您按下BACK按钮(通常的"后退"按钮左上角的Chrome浏览器窗口),它将返回到第一页。此外,如果您使用移动设备打开相同的weui.io,您将能够选择列表中的某个项目,它将再次加载具有此漂亮幻灯片效果的新页面,然后您只需从左向右滑动即可返回上一页。所以滑动工作完全像我觉得非常有趣的APP内部!

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

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

我一直在检查代码,但仍然无法获取覆盖该特定函数的代码部分。

有人在做类似于分享exp的事吗?谢谢你的任何想法!

1 个答案:

答案 0 :(得分:0)

原来是直截了当的:它完全是关于历史API(pushstate + popstate - 这也是一个很好的CSS技巧example开始)。

无论如何,历史API可以帮助您模拟后退/前进按钮的行为,即使您只是这样做。

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

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

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

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