Axure之上下滑动屏幕实现

Axure学习从点滴开始！

下面是插入手机上下滑动屏幕的简单实现方法，希望读该文章的你在产品路上又进步了一点。

1.新建一个项目，在元件库中拖入一个iPhone手机板；

2.在手机版顶部拖入所需元件，命名为top；

3.在手机版底部拖入所需元件，命名为bottom；

4.在中间空白位置拖入与空白区大小一致的动态面板，命名为屏幕；

5.在“屏幕”这个动态面板下的state1中再拖入一个动态面板，长度要超出手机屏幕，命名为内容；

6.在“内容”这个动态面板中的state1中加入所需元件；

7.先回到index页面，再点击动态面板“屏幕”，再双击添加用例中的拖动时事件；

8.选择左侧移动事件，勾选动态面板“内容”，再选择垂直移动；按下确定按钮后即可实现上下滑动屏幕效果，可点击预览查看，但是上下滑动时没有边界限制，可以无限滑动；

9.此时需要添加边界限制条件才可控制屏幕滑动的区域，添加边界，设置顶部<=0；再添加边界，设置顶部>=[[LVAR1.Height-LVAR2.Height]]；具体步骤按照顺序参考下图；

10.点击确定后，保存，点击预览即可查看到效果。

喜欢就经常来关注，文章会不定期更新~