ScrollView嵌套tableView联动滚动最佳实践

前言

随着业务的发展，页面的复杂度愈来愈高，嵌套滚动视图的方式也愈来愈受设计师们的青睐，在各大电商App十分常见。以下Demo图：

可是这样的交互官方并不推荐,并且对开发来讲确是不那么友好，须要处理滚动手势的冲突，页面的多层级嵌套都给开发带来了必定程度的麻烦。接下里我聊聊咱们的实现思路。

思路和过程

对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollView，它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollView，容器上面才是各个页面具体的tableView，以下图：

思路一

最早想到的是，既然是滚动视图那么咱们是否能够经过滚动视图的可滚动属性来作呢，在初始时把最上层具体业务的tableView禁止滚动，那么根据事件响应链,滚动事件事件会由底层的ScrollView接收并处理，在到达最大偏移量以后，禁用底层的ScrollView滚动，同时开启上层的tableView，使得上层能够滑动，想起来是有必定可行性的，惋惜，事实现实是残酷的，效果以下：

这样会致使当偏移量到达临界值时，因为设置了scrollEnable属性和最大偏移量，这次滚动手势会被截断，须要再次拖拽才能继续滚动，显然，这样的效果是没法接受的。

思路二

这是同事提供的思路，在作这个时和同事有过讨论，他们以前有这样的交互页面，使用的是自定义手势，但因为UIScrollView是有弹性效果的，通常的滑动手势作不到这一点的，因此须要引入UIDynamic模拟力场，实现阻尼效果。想了一下，虽然有必定的可行性，可是为了一个联动滑动，要作这么多的事情，感受比较繁琐，并且自定义手势作的模拟弹性效果可能和原生ScrollView的效果仍是有必定的差距，因此选择放弃。

思路三

回到咱们思路一，除了边界位置会阻断联动滚动外，其余效果仍是能够的，那么能不能经过手段解决这个问题呢？既然能写到了这里，那么毫无疑问，确定是能够的。经过手势穿透,即让一个滑动手势既做用于底层的ScrollView又能做用于上层的业务tableView,同时控制他们的滚动便可达成目的。经过让底层的scrollView实现一个手势识别的协议，同时响应滚动事件：

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
复制代码

根据官方文档描述：

Asks the delegate if two gesture recognizers should be allowed to recognize gestures simultaneously.
复制代码

表达的意思是询问委托是否容许两个手势识别器同时识别手势，那么咱们实现这个协议，”穿透“手势，分别在底层容器和上层业务中实现滚动视图的代理方法func scrollViewDidScroll(_ scrollView: UIScrollView)，分别控制他们的可滚动状态和偏移量则能实现目的。部分实现以下：

底层容器ScrollView：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        headerView.isHidden = scrollView.contentOffset.y >= maxOffset ? true : false
        if !superCanScroll {
            scrollView.contentOffset.y = maxOffset
            currentVC.childCanScroll = true
        } else {
            if scrollView.contentOffset.y >= maxOffset {
                scrollView.contentOffset.y = maxOffset
                superCanScroll = false
                currentVC.childCanScroll = true
            }
        }
    }
复制代码

上层业务tableView：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if !childCanScroll {
            scrollView.contentOffset.y = 0
        } else {
            if scrollView.contentOffset.y <= 0 {
                childCanScroll = false
                superCanScrollBlock?(true)
            }
        }
    }
复制代码

经过底层ScrollView是否达到最大偏移量控制header的显示隐藏和对应的偏移量及可滚动状态，在业务tableView使用回调将ScrollView的可滚动状态回调达到状态同步。整体来讲仍是比较清晰，更多细节请看QFMultipleScrollView