Axure如何实现上下滑动的效果

Axure如何实现上下滑动的效果

我们在打开微信或者QQ等社交软件的时候,找好友的时候会上下滑动,上百个好友固定在一个5寸左右的手机(或者电脑端)里,只需我们用手上下滑动就可以找到,而用Axure实现上下滑动效果要怎么操作呢?

我们知道在Axure http://www.axurechina.cc/  软件里有一个叫做内联框架的元件,这个元件自带滚动条,如图所示:

内联框架

不过我们今天不需要用到内联框架来实现,我们可以用动态面板,效果更好。

打开软件拖入一个动态面板,可以适当地拖动长一点:

动态面板

鼠标双击动态面板,管理面板状态,或者右击,进入:State1:

面板状态

在第一个面板状态里再次拖入一个动态面板,将两个动态面板重合,双击管理面板状态,单击进入:State1:

双击进入动态面板

接下来做一个简单的示例,明白其中原理即可,就不做复杂的手机好友列表页面。我拖入几个便签元件,如下图所示:

标签元件

批注:添加的标签元件之所以超出动态面板是为了更好的展示滚动效果。

然后点击第二个设置的动态面板页面,右击选择“滚动条”,单击“自动显示滚动条”

自动显示滚动条

为了预览的的时候不显示滚动条,将右侧的滚动条向右拉尽可能的宽一点,呈以下状态:

拉宽滚动条

这样就实现的上下滚动的效果 ,可以点击预览:

预览滚动之前

滚动之前

滚动之后

滚动之后

总结:如果想要做手机上下滚动的模型设计只需放在动态面板里面,设置动态面板“自动显示滚动条”,调整动态面板的宽和高,这是实现滚动的原理,重复利用即可。

以上就是今天的全部内容,如果对Axure实现上下滑动效果感兴趣,想要学习更多技巧 ,可能关注我们Axure官网。

在线客服
客服邮箱
客服电话
17051276424