前言
随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商app十分常见。如下demo图:
但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦。接下里我聊聊我们的实现思路。
思路和过程
对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollview,它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollview,容器上面才是各个页面具体的tableview,如下图:
思路一
最先想到的是,既然是滚动视图那么我们是否可以通过滚动视图的可滚动属性来做呢,在初始时把最上层具体业务的tableview禁止滚动,那么根据事件响应链,滚动事件事件会由底层的scrollview接收并处理,在到达最大偏移量之后,禁用底层的scrollview滚动,同时开启上层的tableview,使得上层可以滑动,想起来是有一定可行性的,可惜,事实现实是残酷的,效果如下:
这样会导致当偏移量到达临界值时,由于设置了scrollenable属性和最大偏移量,此次滚动手势会被截断,需要再次拖拽才能继续滚动,显然,这样的效果是无法接受的。
思路二
这是同事提供的思路ÿ