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

访客4年前黑客工具1137

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教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

首先我们来看一下简陋效果(是真的非常简陋): 请手动无视最后一次,gif上传后出现的未知问题 接下来我们聊一下如何实现这个效果,首先我们需要一个动态面板: 动态面板状态里面我们需要它们: 然...

Axure教程:左侧导航如何自适应浏览器窗口高度?

Axure教程:左侧导航如何自适应浏览器窗口高度?

导读:自适应欣赏器窗口高度的意思是,欣赏器宽度、高度差异时,就显示条件匹配的视图页面内容。本文作者分享了用Axure实现左侧导航自适应欣赏器窗口高度的实用要领,但愿对各人有所辅佐。 上一篇Axure...

Axure教程:制作弹幕跑马灯效果

Axure教程:制作弹幕跑马灯效果

我们常常在刷文章和视频的时候看到赛马灯结果,他们常常被用在告白和弹幕上利用。本文作者先容了如何用Axure实现弹幕赛马灯结果的操纵步调,以及实现进程中的一些心得体会,与各人分享。 01 前期筹备 软...

Axure教程 | 用中继器做信息流,高仿人人都是产品经理网

Axure教程 | 用中继器做信息流,高仿人人都是产品经理网

本期给各人带来的是高仿资讯网站“人人都是产物司理网”,来看看~ 一、照例先上gif 首页部门 中继器部门 二、建造思路 本次原型的建造主要有四个部门: 浮动导航 右侧区域 版权信息 信息流...

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

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

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