模拟iphone的下拉通知面板

尹广磊 · 发表于 2012-11-23 22:27:38

演示地址：http://5jyi2r.share.hiaxure.com/
模拟iphone的下拉通知面板，拖动下拉按钮向下，达到一半屏时松手。下拉通知面板会自动移动到底部。达不到一半时自动缩回到顶部位置。

原理：

1. 最外面一层面板做为显示框。
2. 里面放一层面板做为整个下拉面板的内容。
3. 再里面把下拉按钮转化为面板，为了让面板可被拖拽。
4. 在下拉按钮面板上添加事件，拖拽时临Y轴方面移动下拉面板。
5. 在拖拽松手时添加事件，条件判断下拉面板是否与屏中间那个位置点面板有接触。如果有接触让下拉面板移动到最底部的绝对坐标位置，如果没有让下拉面板移动到顶部的那个绝对坐标位置。

rp源文件下载：

萧何 · 发表于 2012-11-25 20:32:53

1# 尹广磊

最外层不需要动态面板也可以

lxl0221 · 发表于 2013-8-27 11:38:06

设计的太巧秒了。下载了原文件学习了好长时间才明白。谢谢楼主分享。还请楼主多多分享这样的案例，对于我这样的新手来说帮助很大。

lsn138 · 发表于 2013-8-29 14:39:11

赞一个！楼猪万岁！！！！！！！webppd:flower

SnailDesign · 发表于 2013-12-13 13:50:56

学习了，顶楼主

[手机端] 模拟iphone的下拉通知面板