iOS 开发实用技术导航
NSHipster 中文版
› http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
› http://www.cocos2d-iphone.org/
CocoaPods
› http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
› http://code.google.com/mobile/analytics/
WWDC
› https://developer.apple.com/wwdc/
Design Guides and Resources
› https://developer.apple.com/design/
Transcripts of WWDC sessions
› http://asciiwwdc.com
Cocoa with Love
› http://cocoawithlove.com/
Cocoa Dev Central
› http://cocoadevcentral.com/
NSHipster
› http://nshipster.com/
Style Guides
› Google Objective-C Style Guide
› NYTimes Objective-C Style Guide
Useful Tools and Services
› Charles Web Debugging Proxy
› Smore
这是一个创建于 2963 天前的主题，其中的信息可能已经有所发展或是发生改变。
支付宝 9.x 版本首页效果
对于新版支付宝首页的产品功能这里就不说什么了，一大堆人吐槽，我们只想要一个好好的支付工具，阿里硬是要融入社交...
今天这里不是来评论支付宝功能的，而是作为一个 iOS 开发人员在使用的过程中发现，首页这滑动好“怪异”啊~~
首先，右侧的滚动条的位置好怪！为什么在中间？只能说明一个问题，这个 tableview 是从这里开始的。
其次，既然 tableview 在中间开始，那上面那一片 view 是如何滚动的（从滚动条可以看出不是 tableviewheader ）？而且和 tableview 做到无缝衔接。
再次，滑动 tableview 上面那块 view ，直接响应滑动。
通过上面种种奇怪的现象，于是我决定针对这个效果些一个 demo 来玩玩。
(最后闪的那几下请忽略， gif 图片没有做完美，并不是 demo 的 bug 。。。。)
因为是 demo 嘛，所以代码就尽量简单，处理就基本只放在一个 class 中，这样比较容易理解，大家就不要吐槽这一块了~~~
关键点
经过我反复实验，还是 UIScrollView + UITableView 的方式实现最靠谱，那问题来了，如何处理两个 ScrollView 的滑动冲突？
答案就是关掉一个滑动！当然就是关掉 tableview 的滑动，通过外层 scrollview 的 offset 来直接控制 tableview 的滑动，关键代码：
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = scrollView.contentOffset.y
if (y <= 0) {
var newFrame = self.headerView.frame
newFrame.origin.y = y
self.headerView.frame = newFrame
newFrame = self.mainTableView.frame
newFrame.origin.y = y + topOffsetY
self.mainTableView.frame = newFrame
//偏移量给到 tableview ， tableview 自己来滑动
self.mainTableView.setScrollViewContentOffSet(point: CGPoint(x: 0, y: y))
//功能区状态回归
newFrame = self.functionHeaderView.frame
newFrame.origin.y = 0
self.functionHeaderView.frame = newFrame
} else {
//处理功能区隐藏和视差
var newFrame = self.functionHeaderView.frame
newFrame.origin.y = y/2
self.functionHeaderView.frame = newFrame
}
//处理透明度
let alpha = (1 - y/functionHeaderViewHeight*2.5 ) > 0 ? (1 - y/functionHeaderViewHeight*2.5 ) : 0
functionHeaderView.alpha = alpha
if alpha > 0.5 {
let newAlpha = alpha*2 - 1
mainNavView.alpha = newAlpha
coverNavView.alpha = 0
} else {
let newAlpha = alpha*2
mainNavView.alpha = 0
coverNavView.alpha = 1 - newAlpha
}
}
这里的关键就是当想上滑动的时候，实际就是滑动最外层的 scrollview ，然而想下滑动到顶的时候仅仅只讲 offset 传递给 tableview 让其继续滚动。
tableview 嵌入方式借鉴了：
https://github.com/Zhanggaoyi92/Alipay-8.11-update-demo
 |
1
hekunhotmail 2016-10-12 10:03:32 +08:00
看来没人回复，我来赞你一下吧，这种效果早就已经有，并不是支付宝第一个在用，实现原理也比较明确， so 还是支持一下喽
|
 |
2
zhangfanfan 2016-10-12 10:09:41 +08:00
楼主，你这个 demo 是用什么模拟器搞的？
|
 |
3
SeanChense 2016-10-12 10:10:39 +08:00
|
 |
4
fjhmx 2016-10-12 10:10:40 +08:00
这个可以有,之前还没注意到这个..给个赞
|
 |
5
lisi1987 2016-10-12 10:13:39 +08:00
@hekunhotmail 是的， twitter 的个人信息页面也有这种效果，
翻译： http://keleyundou.github.io/2016/03/30/实现 Twitter-UI 效果 / 原文： http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/ 但是这个 demo 只是实现了缩放效果，但是关键的内容区域的列表没有给出实现，只是用一个 view 代替的，如果只是一个 view 的话这个实现就很简单了。。。 |
|
6
lisi1987 2016-10-12 10:15:01 +08:00
@zhangfanfan 不就是 xcode 的 6s 模拟器吗？
@SeanChense 哈哈，我是原作者，这位同学把 demo 地址改成了 code4app 了，估计是 code4app 的小编。。。 |
 |
7
viko16 2016-10-12 10:16:17 +08:00
天呐关键代码还以为看到了 JavaScript ..
 |
|
9
viko16 2016-10-12 10:41:23 +08:00
|
 |
11
paragon 2016-10-12 11:08:51 +08:00
现在 iOS 也开始抄 Android 了么~
|
 |
13
newkengsir OP @lisi1987 被你识破了 你也玩这个的哈哈。。。。好尴尬，不过还好， code4app 也有 github 地址 稍等，我再附上 github 地址
|
|
14
newkengsir OP https://github.com/seedotlee/AlipayIndexDemo 代码，原作者：@lisi1987
|
 |
15
lvlingsheng 2016-10-29 04:30:35 +08:00
demo 做的还挺有意思的，虽然我一直觉得支付宝的这个交互做的很渣
|
Select Language