两种方法打造手机垂直划屏

拖动元件做边界限制

优点：在电脑端演示时可以很好的还原在手机上的拖动操作。

缺点：需要一定学习和理解成本。

Step.1 创建完整内容页，并转化为动态面板。

Step.2 弄一个手机壳的边框图，将内容页放到对应的位置，再转化为动态面板，并且这个动态面板缩至屏幕显示范围大小。这个动态面板的作用只是限制显示区域。

Step.3 双击第2步创建的动态面板，切换到第1步创建的动态面板，在第1步创建的动态面板上设置交互。[拖动时→移动☑当前元件(移动.垂直拖动)]。

Step.4 由于拖动是有上下边界限制的，所以需要在界限处点击添加边界。顶部<=0，底部>=显示范围高度。

这里的顶部和底部指的是拖动的内容页的最上面那条边和最下面那条边的拖动范围，顶部<=0的意思就是说，顶部那条边界只允许在小等于0的范围内互动，底部同理。

这样图示讲解，你是否明白边界到底是什么意思了呢？

然后，就完成了！

动态面板滚动条

优点：快！瞬间完成！在手机端可以很好的还原拖动操作。

缺点：在电脑端演示时，只可以通过鼠标中键滚轴完成上下滑屏操作。

Step.1 与方法一教程的第1步相同

Step.2 与方法一教程的第2步相同

Step.3 将内容页的动态面板同样缩小至显示范围那么高，然后右键→滚动条→自动显示垂直滚动条。

设置之后会发现一个问题，右边会有一个难看的滚动条，在手机端是没什么影响的，但是电脑端看奇丑无比，所以你需要把内容页的动态面板横向拉宽一点，让滚动条在显示范围外。

又完成了~是不是敲简单？

本文章乃是转载文章，本文章作者：Synmo梦儿，公众号：mhAxure