iOS ScrollView嵌套tableView联动滚动的思路与最佳实践

  

  

随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商应用十分常见。如下演示图:

  

 iOS ScrollView嵌套tableView联动滚动的思路与最佳实践“> </p>
  <p>但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦。接下里我聊聊我们的实现思路。<br/>
  </p>
  <p> <br/>
  </p>
  <p>对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的滚动视图,它的页面上面放一个固定高度的头,紧接着下面一个支持横向滚动切换的容器滚动视图,容器上面才是各个页面具体的表视图,如下图:</p>
  <p> <img src=   func手势识别器(_手势识别器:UIGestureRecognizer shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer)→Bool {   还真   }      

根据官方文档描述:
  

  
  

问委托如果两个同时应该允许手势识别器识别手势。
  

     

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

  

底层容器滚动视图:
  

        func scrollViewDidScroll(_滚动视图:UIScrollView) {   headerView。isHidden=scrollView.contentOffset。y祝辞=maxOffset & # 63;真:假   如果superCanScroll {!   scrollView.contentOffset。y=maxOffset   currentVC。childCanScroll=true   其他}{   如果scrollView.contentOffset。y祝辞=maxOffset {   scrollView.contentOffset。y=maxOffset   superCanScroll=false   currentVC。childCanScroll=true   }   }   }      

上层业务tableView:
  

        func scrollViewDidScroll(_滚动视图:UIScrollView) {   如果childCanScroll {!   scrollView.contentOffset。y=0   其他}{   如果scrollView.contentOffset。y & lt;=0 {   childCanScroll=false   superCanScrollBlock& # 63;(真正的)   }   }   }      

通过底层滚动视图是否达到最大偏移量控制头的显示隐藏和对应的偏移量及可滚动状态,在业务tableView使用回调将滚动视图的可滚动状态回调达到状态同步。总体来说还是比较清晰,更多细节请看QFMultipleScrollView

iOS ScrollView嵌套tableView联动滚动的思路与最佳实践