axure9怎么让页面上下滑动_Axure 9 教程:手机端如何实现上下滑动?

原标题:Axure 9 教程:手机端如何实现上下滑动?

编辑导读:在手机端进行操作时,上下滑动是最常做的动作。想要实现这个一简单效果,背后有错综复杂的工作。本文作者将从四个方面,分析如何用更简单的方法完成上下滑动的功能,一起来看一下吧。

6535272de0fb5b9b833a83f9934970b5.png

在网上看了很多大神的文章,学会了在手机端实现上下滑动的效果。但是有感于此功能的错综复杂,希望本文章可以用更简单的思路,帮助大家更好地理解上下滑动的功能。

预览地址:https://t2og3w.axshare.com

一、明确

首先明确:这边只讲上下滑动,且按照我的方法,可以做出这个效果。

二、元件准备

第1步:从元件库中拖一个动态面板命名为“内容面板”高“500”。

dc9973eb38593fe8384cfc4616f63473.png

第2步:在第1步的“内容面板”动态面板中再加一个动态面板,叫”拖动面板“,高“800”。最后效果中显示的页面内容,是添加在这个拖动面板里面的。

78ce32fd831475212611b1a36a7ff0ba.png

三、滑动原理

我们来理解一下上下滑动的原理:

向上滑动时,拖动面板在y轴的活动范围是:-300;顶部边界是≥-300,且≤0;

向下滑动时,拖动面板在y轴的活动范围是:300;底部边界是≥500,且≤800;

fdbb65ec6a48df38b4a5f1bbf04d2fda.png

四、添加交互事件

选中“内容面板”动态面板,添加交互事件如图:

注意:选中的是“内容面板”动态面板,目标元件是“拖动面板”动态面板,事件是“向上滑动”

移动范围是:y轴上-300的距离(即“内容面板”和“拖动面板”的高度差)

添加边界:顶部边界≥-300,顶部边界≤0

添加动画效果:线性,500毫秒

06ad9c36d66694a006c808e8a6b0aa84.png

继续选中“内容面板”动态面板,添加交互事件如图:

选中的是“内容面板”动态面板,目标元件是“拖动面板”动态面板,事件是“向下滑动”。

移动范围是:y轴上300的距离(即“拖动面板”和“内容面板”的高度差)

添加边界:底部边界≥500,底部边界≤800

添加动画效果:线性,500毫秒

49f3c6f9f3f6ea796149d0aa00257d46.png

这样,手机端上下滑动的功能就大致实现了。

结语:实际操作中,大家制作的面板高度各不相同,但只要理解这个意思,自行加减高度,就可以实现滑动效果。

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

题图来自Unsplash,基于CC0协议。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值