1. 主页 > 行业资讯 > 设计文章 >

Axure教程:实现移动页面上下滑动效果

编辑线索:我们经常会遇到产品中上下滑动的页面。比如我们预览页面时,需要上下滑动才能查看;这篇文章的作者分享了关于在移动页面上下滑动的Axure教程。我们一起来看看。

案例展示:https://ctm29p.axshare.com/

工具:Axure RP9

本文将介绍两种方法来达到上下滑动页面的效果(学习这两种方法就够了)。

01方法1:(超级方便)

这种方法的要点是利用“动态面板”的“滚动条”的垂直滚动功能,实现内容上下滑动的效果。

设计思路如下:

1.首先画出页面的基本结构

下图:基于(375*667)iPhone8的宽度和高度,上下有两个矩形(375*50),中间有一个动态面板(375*567)。

2.设置动态面板(重点来了)

1)填写滚动预览的内容:双击【动态面板】进入状态1,然后填写里面的框,硬填,至少超过动态面板的高度。

2)实现内容滚动:关闭状态1,然后选择动态面板,右键单击滚动条,选择垂直滚动。

或者按如下所示操作:

点击“预览”,就会实现上下滑动的效果,好容易!但是你会发现右边有一个滚动条,很疯狂,影响美观。

3)隐藏滚动条:这里有两种方法

1.我们可以用一个长方形作为滚动条来覆盖它(魔高一尺,路高一尺,(~▽)/Xi Se)如下图:

2.(这样会比1好,不会遮挡边界内容)拓宽动态面板,让滚动条区域超出页面大小(即页面大小要先设置,比如我的情况是基于iPhone8的页面大小)
(这个方法来自评论区的小可爱,谢谢小可爱)

点击预览,完美。

02方法2:(滚动条没有问题)

这种方法比第一种方法略难理解,可以边操作边按照下面的步骤理解量。

方法在于动态面板2的内容会随着操作动态面板1的滚动而移动,并设置滑动限制。

设计思路如下:

来源:http://www.woshipm.com/rp/420885.html

1.首先画出页面的基本结构

和往常一样,先画一个模型,如下图:基于(375*667)iPhone8的宽度和高度,上下有两个矩形(375*50),中间有一个动态面板1(375*567),然后在动态面板1的状态1中添加一个动态面板2(375*567)。

2.渐进细节

1)填写动态面板2的状态1;用力填充内容,至少超过动态面板1的高度,然后就可以看到滑动效果了。

2)拖动动态面板1时,动态面板2随着垂直拖动而移动;选择【动态面板1】,点击【新建交互】,选择【拖动时】-【移动】,选择【动态面板2】,选择【跟随垂直拖动】,点击【完成】,如下图:

3)拖动动态面板1时,如果动态面板2没有接触到顶部矩形,则将动态面板2移回开始处的顶部。

选中【动态面板1】点��վ�������击【新建交互】选择【拖动结束时】点击【启用情形】;添加情形1:如果范围于 动态面板2 未接触 范围于 顶部矩形;在情形1下添加动作:【添加动作】-【移动】动态面板2 到达 (0,0) 点击“完成”;如下图设置:

4)拖动动态面板1时,如果动态面板2没有碰到底部矩形,则将动态面板2的末端移回底部;操作步骤与(3)基本相同。

在【拖动结束时】添加情形2:如果范围于 动态面板2 未接触 范围于 底部矩形;在情形2下添加动作:【添加动作】-【移动】动态面板2 到达 (0,-222) 点击“完成”;如下图设置:(tip:动态面板1的高 – 动态面板2的高 = -222)。

点击预览,完美。

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/507.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息