Axure教程:上下滚动效果制作步骤详解

Olga
11 评论 53665 浏览 119 收藏 5 分钟

上一篇《Axure教程: 轮播图制作步骤详解》,今天来给大家讲讲如何用Axure实现上下滚动效果。

如何实现上下滚动效果:

  1. 让内容在显示区域滚动;
  2. 内容面板没有接触到顶部时,让内容面板移动至顶部;
  3. 内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

1、所需元件

首先,我们需要准备以下元件:

2个矩形(300*30,分别命名为“顶部”、“底部”),动态面板(300*400,命名为“显示区域”)。

点击【显示区域】,在此面板的状态1中,添加一个动态面板(300*750)。

2、填充“内容”面板

双击内容面板中的状态1,填充一些元素,方便查看滚动效果。

3、添加事件

(1)让内容在显示区域滚动。即,让内容面板中的内容,在显示区域面板的区域中滚动展示。

选中【显示区域】面板,添加【拖动时】用例,添加【移动】动作,勾选【内容】面板,移动方式为【垂直移动】,点击确定。

(2)当内容面板没有接触到顶部时,让内容面板移动至顶部。

① 先编辑条件,内容面板未接触到顶部。

选中【显示区域】面板,添加【拖动结束时】用例,【添加条件】。条件编辑如下图:

②让内容面板移动至顶部。

添加【移动】动作,勾选【内容】面板,移动【到达】至【0,0】。

(3)内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

①先编辑条件,内容面板接触到顶部,但未接触底部。

选中【显示区域】面板,添加【拖动结束时】用例,【添加条件】。条件编辑如下图:

②让内容面板移动至顶部。

添加【移动】动作,勾选【内容】面板,移动【到达】至【0,-350】,点击确定。

-350=400-750(显示区域面板高度-内容面板高度)

以上就是用Axure 制作上下滚动效果的全部过程,可以点击预览查看一下~

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

密码:15kp

 

本文由 @ Olga 原创发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 楼主大大,能在分享下吗? 链接失效了

    来自山东 回复
  2. 勾选“后向循环”是什么作用

    来自北京 回复
  3. 上下滚动的内容,添加鼠标点击时跳转到链接无法实现跳转。就是上下滚动的内容只能看,但是不能在内容添加交互了,添加了会没有效果

    来自广东 回复
    1. 可以的

      来自菲律宾 回复
  4. 文不对题啊——标题“上下滚动”,内容却是教“上下拖动”

    来自广东 回复
    1. 🙂

      来自浙江 回复
  5. 建议教程在前面加上录屏的效果展示,这样更直接直观一些,感谢分享

    来自广东 回复
    1. 谢谢您的建议 🙄

      来自浙江 回复
专题
14170人已学习12篇文章
苹果发布了Vision Pro这款MR头显,而这一产品的出现,也让我们看到了更多有关空间体验设计的相关可能。本专题的文章分享了Vision Pro的设计和交互指南。
专题
14529人已学习14篇文章
用户生命周期是每个产品经理都必须要注意的一个点,它能够衡量用户对产品产生的价值,也是运营手段的最终衡量指标。本专题的文章分享了如何做好用户生命周期管理。
专题
13379人已学习11篇文章
产品经理/运营/数据分析师,如果能够掌握一些常用的Excel的技巧,会对工作效率有所提高。本专题的文章分享了经常用到的Excel技巧。
专题
13739人已学习13篇文章
用户体验是用户在使用产品过程中建立起来的一种纯主观感受。本专题的文章分享了如何撰写用户体验报告。
专题
11776人已学习12篇文章
如今随着商业的发展,消费者与品牌建立起了更深的联系,商务活动也开始以消费者为中心,所以消费者的体验以及建议就非常重要。本专题的文章分享了消费者行为学。