IOS version of Alipay 9.x home page effect

The Alipay 9.x version of home effect

For the new Alipay home products function here is not what to say, a lot of people Tucao, we just want a good tool of payment, Ali tried to integrate social…

Today, here is not to comment on Alipay function, but as a iOS developer in the process of using, this “strange” sliding home ah ~ ~

IOS version of Alipay 9.x home page effect

First, the position of the scroll bar on the right is so weird! Why in the middle? Can only explain a problem, this tableview is from here.

Second, since tableview starts in the middle, how does that slice of view roll above (from scroll bars, not tableviewheader)? And seamless connection with tableview.

Again, slide the tableview above the view, which responds directly to the slip.

Through the strange phenomena above, I decided to play with a demo for the effect.

IOS version of Alipay 9.x home page effect

Demo address: https://github.com/seedotlee/AlipayIndexDemo

Because it is demo well, so the code as simple as possible, processing is basically placed in a class, so that relatively easy to understand, we do not Tucao this piece of ~ ~ ~!

key point

After my repeated experiments, or UIScrollView + UITableView way to achieve the most reliable, and that problem came, how to deal with two ScrollView sliding conflict?

The answer is to turn off a slide! Of course, just turn off the tableview slider and control the tableview’s sliding through the Scrollview of the outer offset, the key code:

Func scrollViewDidScroll (_ scrollView: UIScrollView) {let y = scrollView.contentOffset.y if y < = 0; newFrame = self.headerView.frame {var newFrame.origin.y = y self.headerView.frame = newFrame newFrame = self.mainTableView.frame newFrame.origin.y = y + topOffsetY = newFrame / self.mainTableView.frame offset to tableview, tableview to self.mainTableView.setScrollViewContentOffSet (point: CGPoint sliding (x: 0, y: y)) / / the function of state regression newFrame = newFrame.origin.y = 0 = self.functionHeaderView.frame self.functionHeaderView.frame newFrame else if y <}; functionHeaderViewHeight & & Y; > / / 0{processing function area hidden and VaR newFrame = self.functionHeaderView.frame newFrame.origin.y parallax = y/2 self.functionHeaderView.frame = newFrame / let = alpha with transparency (1 - y/functionHeaderViewHeight*2.5) > 0? (1 - y/functionHeaderViewHeight*2.5): 0 functionHeaderView.alpha = Alpha if alpha > newAlpha alpha*2 {let = 0.5; mainNavView.alpha = newAlpha - 1 coverNavView.alpha = 0} else {let newAlpha = alpha*2 mainNavView.alpha = 0 coverNavView.alpha = 1 - newAlpha}}}

The key here is the time when you want to slide, is the outermost layer of sliding Scrollview, however, want to slide to the top only offset passed to the tableview to continue its rolling.

The tableview embedding method is used for reference:

Https://github.com/Zhanggaoyi92/Alipay-8.11-update-demo