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

访客4年前黑客工具1118

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

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

Axure教程:真的能播放视频的视频APP原型(抖音案例)

Axure教程:真的能播放视频的视频APP原型(抖音案例)

今天和大家分享一个视频分享app的demo,包括播放视频、关注、点赞、评论、转发分享等功能。该原型交互效果齐全,使用也简单,只需要填写中继器表格即可。所以推荐给大家使用,喜欢原型或者有疑问的小伙伴们可...

Axure教程:筛选标签展示效果

Axure教程:筛选标签展示效果

当我们利用APP的时候总会碰着筛选标签的环境,那么筛选标签的结果是怎么实现的呢? 前期筹备 软件:Axure 9.0 硬件:Windows/Mac电脑 筛选标签结果图: 教程 (1)找到一个手...