查看: 16117|回复: 4

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

[复制链接]

513

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
75210
QQ
发表于 2012-11-23 22:27:38 | 显示全部楼层 |阅读模式
尹广磊公众帐号
2012-11-23_22-20-12.jpg
演示地址:http://5jyi2r.share.hiaxure.com/
模拟iphone的下拉通知面板,拖动下拉按钮向下,达到一半屏时松手。下拉通知面板会自动移动到底部。达不到一半时自动缩回到顶部位置。


原理:

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

rp源文件下载:

模拟iphone下拉通知面板.rp

63.59 KB, 下载次数: 621

售价: 20 角  [记录]

0

主题

55

回帖

171

积分

会员

Rank: 5Rank: 5

积分
171
发表于 2012-11-25 20:32:53 | 显示全部楼层
1# 尹广磊


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

0

主题

3

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2013-8-27 11:38:06 | 显示全部楼层
设计的太巧秒了。下载了原文件学习了好长时间才明白。谢谢楼主分享。还请楼主多多分享这样的案例,对于我这样的新手来说帮助很大。

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-8-29 14:39:11 | 显示全部楼层
赞一个!楼猪万岁!!!!!!!webppd:flower

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2013-12-13 13:50:56 | 显示全部楼层
学习了,顶楼主
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-29 23:51

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表