找程序

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

作者 : 找程序 发布时间: 2020-05-24 10 人阅读

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

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

前期准备

软件:Axure 9.0

硬件:Windows/Mac电脑

界面分解图:

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

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

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

教程

(1)制作手机外形,手机元件库里面都有。

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

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

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

(3)我们先来介绍下拉刷新动态面板的界面,一个是拖动时的准备刷新界面,另外一个是拖动结束时展示的刷新效果界面。

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

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

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

(4)接下来介绍界面动态面板的设置

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

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

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

设置界面动态面板拖动结束时的效果,这个时候要考虑两种情形。我们想要实现的效果是:

  • 当拖动距离<=下拉刷新面板的行高时时不切换图片;
  • 当拖动距离>下拉面板行高时切换照片(并循环切换下一张)。

注:80是我这个下拉刷新面板的行高,你们可以根据自己的规则调整。

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

最终效果

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

结语

让我们来回顾一下整个过程,动态面板至少要保持2个动态,当距离发生变化时切换图片并让图片回到下拉之前的位置上来,距离不变时仅垂直移动。

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

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

题图来自Unsplash,基于CC0协议

找程序,分享优质的SEO行业资源
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、程序等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,无法解压或无法正常使用的请联系管理员!

找程序 - www.zhao.cx » Axure教程:手把手教你APP下拉刷新效果

常见问题FAQ

下载的源码或程序是否可以直接使用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用特别是不要用于非法途径。若由于商用引起版权纠纷或因用于非法途径产生的一切责任均由使用者承担。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们。
买到的源码或程序不能使用怎么办?
对于通过 找程序 购买并下载的源码或程序出现不可用等问题时可第一时间与客服取得联系,以获得有效帮助或退款处理。 同样也欢迎用户对资源的真实性、完整性进行核查,发现问题联系客服可获得额外奖励。

发表评论

33368
+0资源总数
本站已稳定运行224天
07月12日
+0今天更新
最新内容更新于2020-7-11

永久VIP可免费下载全站资源

立即了解