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

访客3年前黑客工具1097

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下拉刷新结果

相关文章

设计万花筒|进击的盈利模式之会员体系

设计万花筒|进击的盈利模式之会员体系

编辑导读:现代日常糊口中可谓是无处不会员:点外卖要VIP,看综艺要VIP,购物要VIP,听歌要VIP,大巨细小的产物险些都构建了本身的会员体系。那么,会员体系应该奈何设计才气让用户康健而一连的留存下来...

人脸验证产品怎么做?

人脸验证产品怎么做?

编辑导语:人脸验证产物我们应该都很熟悉了,不少人都在用人脸举办解锁可能付出。然而,我们对人脸验证的相识仅限于在利用层面上,可是对付其开拓却少有人相识。本日,在本篇文章中,作者通过本身亲身打仗的人脸验证...

三十而已的职场人,是思考N种出逃方案,还是继续挖井

三十而已的职场人,是思考N种出逃方案,还是继续挖井

编辑导语:产物司理年龄大了怎么办?不少人因为这个问题焦急,其实有许多步伐可以办理,可以选择转型此外规模,选择进修更多常识等等;本文作者具体阐明白如今三十多岁职场出逃的现象,但愿能给你带来辅佐。 对付...

从0到1,如何构建用户画像体系?

从0到1,如何构建用户画像体系?

文章从数据产物层面出发,对如何从0到1建树用户画像体系举办了梳理阐明,主要是4个步调:业务需求阐明、建树标签体系、建树画像系统和画像应用,供各人一同参考和进修。 从PC到移动互联网,一批搭乘流量红利...

中国互联网2020年鉴:上半年推直播,下半年抢搜索

中国互联网2020年鉴:上半年推直播,下半年抢搜索

编辑导读:刚已往的七月,腾讯将要全资收购搜狗的动静发布,引起了各人的存眷。腾讯为什么要收购搜狗?搜索引擎这个“老产品”在本日的互联网尚有什么代价?本文作者从行业出发,对搜索业务的近况展开了梳理阐明,一...

芯片破壁者:CPU战争三十年

芯片破壁者:CPU战争三十年

编辑导语:中国有句老话,天下局面,分久必合,合久必分。在CPU行业,也是如此。在桌面级CPU规模一家独大的Intel,频频受到了AMD极大的挑战,看似波涛不惊的市场早已暗流涌动。AMD与Intel之间...