AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新

2019-10-2911:30:54原型设计Comments2,438 views字数 799阅读模式
效果图
提醒：因为我们每一次的更新都是在原有的原型基础上开展的，因此原型会越来越复杂。效果描述：本次我们展现下拉刷新效果，下拉列表，出现刷新icon，松开手指，页面弹回，刷新结束后，刷新icon消失。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html
实现逻辑
元件.top 函数：获取元件对象的上边界坐标值。拖动页面时，页面top值超过一定程度的时候，让页面弹回到初始位置。向下拖动页面的时候，出现下拉刷新icon。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html
步骤1-元件准备
准备元件，我们准备好朋友圈页面的内容，并将其转换成动态面板，准备一个返回icon，一个相机icon和一个下拉刷新的gif图。（gif图已经上传到附件内，我们就不具体演示了）
AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
我们元件排序:返回icon、相机icon、下拉刷新icon（隐藏）在顶，朋友圈内容的动态面板在底。
步骤2-交互
先简单讲一下设置逻辑，我们再上图：我们在拖动内容动态面板的时候。可能向上拖动，可能向下拖动，虽然向上拖动和向下拖动是设置在同一个交互内的，但是我们为了做到下拉刷新自动弹回，那么就要设置两种条件。我们让动态面板沿着Y轴自由拖动，但是元件顶部超过一定的高度的时候，需要出现下拉刷新的icon，这就是下拉场景，同时在超过一定高度的时候，松开手，这时候页面会自动弹回。我们一起来看，选择内容动态面板：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

拖动时，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

if this.top≤0，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

让动态面板随着手指沿着Y轴移动，设置边界为顶部坐标≤250，底部坐标≥644，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

隐藏 下拉刷新icon。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

else if，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

让动态面板随着手指沿着Y轴移动，设置边界为顶部坐标≤250，底部坐标≥644，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

显示 下拉刷新icon。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

如图所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
拖动结束时，if this.top≥1，移动 动态面板 到 （0，0），文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

等待 500ms，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

隐藏 下拉刷新icon。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

（等待500ms是为了更好的模拟刷新等待的效果）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html

AxureRP9菜鸟进阶教程：模拟微信系列4下拉刷新
结语
本次原型内容做在了左侧的微信中。
原型文件可以通过下边的链接下载：密码：q2cf注意哦，我们的原型只能用Axure RP 9打开哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17184.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/yuanxing/17184.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定