支付寶 9.x 版本首頁效果
對于新版支付寶首頁的產(chǎn)品功能這里就不說什么了，一大堆人吐槽，我們只想要一個好好的支付工具衡便，阿里硬是要融入社交...
今天這里不是來評論支付寶功能的，而是作為一個iOS開發(fā)人員在使用的過程中發(fā)現(xiàn)，首頁這滑動好“怪異”啊~~
首先走净，右側(cè)的滾動條的位置好怪！為什么在中間囊嘉？只能說明一個問題温技，這個tableview是從這里開始的。
其次扭粱，既然tableview在中間開始舵鳞，那上面那一片view是如何滾動的（從滾動條可以看出不是tableviewheader）？而且和tableview做到無縫銜接琢蛤。
再次蜓堕，滑動tableview上面那塊view，直接響應(yīng)滑動博其。
通過上面種種奇怪的現(xiàn)象套才，于是我決定針對這個效果些一個demo來玩玩。
demo地址: https://github.com/seedotlee/AlipayIndexDemo
因為是demo嘛慕淡，所以代碼就盡量簡單背伴，處理就基本只放在一個class中，這樣比較容易理解峰髓，大家就不要吐槽這一塊了~~~
關(guān)鍵點
經(jīng)過我反復(fù)實驗傻寂，還是 UIScrollView + UITableView 的方式實現(xiàn)最靠譜，那問題來了携兵，如何處理兩個ScrollView的滑動沖突疾掰？
答案就是關(guān)掉一個滑動！當(dāng)然就是關(guān)掉tableview的滑動徐紧，通過外層scrollview的offset來直接控制tableview的滑動静檬，關(guān)鍵代碼：
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))
//功能區(qū)狀態(tài)回歸
newFrame = self.functionHeaderView.frame
newFrame.origin.y = 0
self.functionHeaderView.frame = newFrame
} else if y < functionHeaderViewHeight && y > 0{
//處理功能區(qū)隱藏和視差
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
}
}
}
這里的關(guān)鍵就是當(dāng)想上滑動的時候，實際就是滑動最外層的scrollview拂檩，然而想下滑動到頂?shù)臅r候僅僅只講offset傳遞給tableview讓其繼續(xù)滾動侮腹。
tableview嵌入方式借鑒了：
