今天我将告诉你如何使用Axure来实现上下滚动效果。

如何实现上下滚动效果：

让内容在显示区域中滚动;

当内容面板未触及顶部时，将内容面板移动到顶部;

当内容面板未接触底部时，内容面板接触顶部并将内容面板的底部定位到底部组件位置。

1.必需的组件

首先，我们需要准备以下组件：

2个矩形（300 * 30，名为““ top””，“bottom”），动态面板（300 * 400，命名为“ldquo;显示区域”）。

单击[显示区域]，然后在此面板的状态1中添加动态面板（300 * 750）。

2，填写“ldquo;内容”面板

双击内容面板中的状态1以填充一些元素，以便更容易看到滚动效果。

3.添加活动

（1）让内容在显示区域中滚动。也就是说，内容面板中的内容被滚动并显示在显示区域面板的区域中。

选择[显示区域]面板，添加[拖动]用例，添加[移动]操作，选中[内容]面板，将方法移动到[垂直移动]，然后单击确定。

（2）当内容面板未触摸顶部时，将内容面板移动到顶部。

1首先编辑条件，内容面板不触及顶部。

选择[显示区域]面板，添加[拖动结束时]用例，[添加条件]。条件编辑如下：

2让内容面板移到顶部。

添加[Move]动作，选中[Content]面板，然后将[Arrival]移动到[0,0]。

（3）当内容面板接触顶部而不接触底部时，内容面板的底部位于底部组件位置。

1首先编辑条件，内容面板触摸顶部，但不触及底部。

选择[显示区域]面板，添加[拖动结束时]用例，[添加条件]。条件编辑如下：

2让内容面板移到顶部。

添加[Move]操作，选中[Content]面板，将[Arrival]移动到[0，-350]，然后单击OK。

-350=400-750（显示区域面板高度 - 内容面板高度）

以上是使用Axure构建上下滚动效果的整个过程。您可以单击预览进行查看〜

文件共享：http://pan.baidu.com/s/1hsIPfDU

密码：15kp

« 从用户场景 | 最有效的营销方法是让客户“情绪化”...... »