Axure8.0怎么设计移动手机端上下滑动不出屏？

本文声明：本文属于扯淡类型，简单的问题复杂化。

用Axure制作原型的时候，一般对于新手来说，第一次制作出来，可能是个很长的一个布局图。如果在PC端自己上下滑动即可。然后要是手机端的原型，则是在有限的手机框下上下滑动。这时候就需要将屏幕上下滑动且不出屏。

今天和大家分享的是通过多动态面板套用实现上下滑动不会超出屏幕框架。

一、元件准备

top（头部）、background（背景）、bottom（底部）、cours（课程）、drag（拖动）。

注：top和bottom保持在顶层，beijing为矩形，此处应去掉边框，cours和drag是动态面板，所有元件的宽度相同

二、排版

beijing紧挨top底边且对齐放置，bottom紧挨beijing底部放置，接着course以头部对齐的方式覆盖到beijing上，最后drag以头部对齐的方式覆盖到course上。

注：如果bottom之前忘记点击顶层，是会被覆盖住，这个时候要将其放置顶层。

三、添加用例

1 drag移动时，移动course动态面板，默认跟随。

2 drag拖动时，自身垂直拖动。

3 drag拖动时，编辑条件 如果drag的顶部大于top的底部，则drag移动到绝对位置(达到)  x:0,  y:[[t.bottom]]。

4 drag拖动时，编辑条件 如果drag的底部小于bottom的顶部，则drag移动到绝对位置(达到)  x:0,  y:[[b.top-d.height)]]。

5将排版好的原型再次转换成动态面板，嵌到高保真手机壳上，并且将新的动态面板的底边向上拉动，直到与bottom的底边重合。

附：相对简单的方法

1、元素说明

外层 一个固定大小的动态面板，高度640；固定屏幕

里面 一个自动调整为内容尺寸的面板，高度1000，长页面

2、期望动作

在外层固定面板中，可以手动滑动长页面。 并且长页面在一个固定的一个范围内滑动。 （长页面不出屏）

3、操作

在外层动态面板的状态1中，创建长页面的动态面板。

在状态1中，对长页面动态面板设置“拖动时”事件

添加动作“移动-长页面面板”设置垂直移动

添加移动边界

顶部 大于等于 负 (长页面高度 – 外层固定页面高度)

底部 小于等于 长页面高度

顶部 大于等于 负360

底部 小于等于 1000

就可以了