Axure教程:手把手教你APP下拉刷新效果

访客3年前黑客工具1089

APP下拉刷新结果,即手机APP下拉界面界面时显示正在刷新/加载数据的提示文案,随后文案消失并在加载竣事时展示最新的APP界面。

Axure教程:手把手教你APP下拉刷新结果

前期筹备

软件:Axure 9.0

硬件:Windows/Mac电脑

界面解析图: 

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

教程

(1)建造手机外形,手机元件库内里都有。

Axure教程:手把手教你APP下拉刷新结果

(2)建设一个内容动态面板并起名,并在动态面板里建设界面动态面板和下拉刷新动态面板2个面板。将下拉刷新动态面板放在界面面板下方(每个面板至少2个状态),演变图如下:

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

(3)我们先来先容下拉刷新动态面板的界面,一个是拖动时的筹备刷新界面,别的一个是拖动竣事时展示的刷新结果界面。

注:图二的图片要在后头界面动态面板中配置成动态的,需要给图片单独起一个名字。

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

(4)接下来先容界面动态面板的配置

界面面板主要是展示界面图片,配置至少2个状态,每个状态展示一个界面,并起名。

Axure教程:手把手教你APP下拉刷新结果

Axure教程:手把手教你APP下拉刷新结果

配置界面动态面板拖动时结果,拖动界面时让界面保持垂直移动。

Axure教程:手把手教你APP下拉刷新结果

配置界面动态面板拖动竣事时的结果,这个时候要思量两种景象。我们想要实现的结果是:

当拖动间隔<=下拉刷新面板的行高时时不切换图片;

当拖动间隔>下拉面板行高时切换照片(并轮回切换下一张)。

注:80是我这个下拉刷新面板的行高,你们可以按照本身的法则调解。

Axure教程:手把手教你APP下拉刷新结果

最终结果

Axure教程:手把手教你APP下拉刷新结果

结语

让我们往返首一下整个进程,动态面板至少要保持2个动态,当间隔产生变革时切换图片并让图片回到下拉之前的位置上来,间隔稳定时仅垂直移动。

Axure教程:手把手教你APP下拉刷新结果

相关文章

Axure教程:登录滑动拼图验证交互教学

Axure教程:登录滑动拼图验证交互教学

滑动拼图是互联网一种新的验证形式,被广泛应用在各种网站的登录、注册、找回密码。用户可以不需要填写复杂的验证码,而是用鼠标去拖动滑块便能通过验证。 下面为今日头条的滑动拼图验证,接下来将为大家讲解:...

Axure教程:实现光标移动切换图片的效果

Axure教程:实现光标移动切换图片的效果

编辑导读:本文跟各人分享,如何用Axure实现光标移动切换图片的结果,作者从预览图,到所需原件,再到操纵步调都一一展开了阐明,并对进程中需要留意的问题举办了先容,但愿对你有所开导。 01 概述 本日...

Axure教程:APP/PC页面悬浮按钮显示与隐藏效果

Axure教程:APP/PC页面悬浮按钮显示与隐藏效果

无论是APP可能PC端页面,右下角大多城市有默认收起的悬浮按钮,点击悬浮按钮后会展开更多信息。本文作者先容了如何用Axure实现悬浮按钮显示与埋没结果的操纵步调,以及实现进程中的一些心得体会,与各人分...

Axure产品原型设计规范:这3点需要注意

Axure产品原型设计规范:这3点需要注意

编辑导语:Axure 是建设软件原型的快速有力的东西,然而对付很对用户来说,他们大概没有接管过正式的培训,不知道如何故得当的方法来更有效率的利用Axure。基于此,本文作者团结案例分享了产物原型页面类...

Axure教程:这几个小技巧你一定要知道

Axure教程:这几个小技巧你一定要知道

编辑导读:Axure是产物司理在事情中最常用到的软件之一,尽量它的利用范畴很是遍及,可是有一些小能力许多人并不知道。本文作者总结了Axure在利用中的一些小能力,与你分享。 一、Axure建造页面,...

Axure教程:用中继器做手机版日期选择器和手机日历

Axure教程:用中继器做手机版日期选择器和手机日历

本日和各人分享怎么用中继器建造手机版的日历。该原型利用利便,可直接利用,并且交互齐全完善,所以推荐给各人利用。这期的内容,数学公式较量多,大概有些小同伴会不大白,喜欢原型可能有疑问的小同伴们可以在下...