Axure教程——移动端APP原型框架搭建、返回顶部、底部导航、下拉刷新、弹框提示。亮亮原型、移动端高保真原型、Axure元件库、Axure原型设计、APP元件库、APP动效库。

Axure Share 原型在线地址：https://arhwsr.axshare.com（打开有点慢，请耐心等待）

原型屏幕尺寸：375*667px（iphone6/iphone6s/iphone7）

一、返回顶部思路解析

1、在Axure中设置2个动态面板：返回顶部动态面板（以下简称“返回箭头”），内容动态面板（以下简称“内容面板”）；

2、返回箭头默认隐藏，内容面板向上拖动至第2屏底部时，显示返回箭头，向下拖动至第2屏底部时，隐藏返回箭头：

• 内容面板拖动至第2屏底部时，其头部y坐标值=内容面板默认y坐标值-1屏的高度；
• 内容面板默认y坐标值=65px；
• 1屏的高度=屏幕高度-头部高度-底部导航高度=667-65-50=552px；
• 内容面板拖动至第2屏底部时，其头部y坐标值=65-552=-487px；
• 即拖动内容面板时，如果内容面板头部y坐标值大于-487时，隐藏返回箭头，头部y坐标值小于等于-487时，显示返回箭头；

3、点击返回箭头时，移动内容面板至初始坐标值（0，65），同时隐藏返回箭头。

二、下拉刷新思路解析

1、在Axure中设置2个动态面板：下拉刷新动态面板（高度：65px，以下简称“刷新面板”），内容动态面板（高度调整为内容尺寸，以下简称“内容面板”）；

2、刷新面板初始坐标（0，0），内容面板初始坐标（0，65）；

3、垂直拖动内容面板时，刷新面板底部移动至内容面板头部，设置提示语为：“下拉刷新”；

4、拖动内容面板y坐标大于等于130时，刷新面板改变提示语为：“松手刷新”；

5、拖动结束时，若内容面板头部y坐标大于等于130，则移动刷新面板至（0，65），移动内容面板至（0，130），改变刷新面板提示语为：“刷新中…”，并在此坐标等待1000毫秒，**再将两面板移回至初始位置；

6、拖动结束时，若内容面板头部y坐标大于65小于130时，则将两面板移回至初始位置。

三、底部导航思路解析