三种左右两个列表联动效果

这个效果我们经常会看到比如外卖，电商App的分类页面上看到，大概就是这样：

image.png

点击左侧列表右侧会跳到指定位置，滑动右侧左侧会跟着切换，就是这么个东西。

然后常见的交互效果有两种。一种是像“饿了吗”点餐那种，右侧是一体的可以一直滑动。第二种是像“网易严选”分类那样，右侧多个列表，然后使用pagingEnabled效果进行切换的。感兴趣的可以看看这两种。然后我这次做了一个在第二种上进行优化的效果，算是第三种吧。下面我们就说说这三个效果都是怎么做的。

第一种

左侧列表没什么好说的就是一个列表，使用table和Collection都是可以的（我是比较习惯使用Collection）。右侧由于也是连贯滑动的，所以也使用一个Collection就可以了。数据上看，一般都是返回的一个对象集合，集合里每个对象还有个子分类的几个:

"list": [{
                "name": "大分类"
                "list": [{
                    "name": "小分类",
                    "img": "https:\/\/res2.kongfz.com\/app\/search\/channel\/xianzhuang.png?2021122817"
                }, {
                    "name": "小分类",
                    "img": "https:\/\/res2.kongfz.com\/app\/search\/channel\/minguo.png?2021122817"
                }]
            },
            {
                "name": "大分类"
                "list": [{
                    "name": "小分类",
                    "img": "https:\/\/res2.kongfz.com\/app\/search\/channel\/xianzhuang.png?2021122817"
                }, {
                    "name": "小分类",
                    "img": "https:\/\/res2.kongfz.com\/app\/search\/channel\/minguo.png?2021122817"
                }]
            }

        ]

这样我们左侧用外层的集合做数据。右侧根据两层数据对列表进行分组处理。外层对应section里层对应row。然后在点击左侧切换时跳转到对应的section，监听右侧滑动的位置来刷新左侧的选择状态就可以了。参考代码如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView == _leftCollectionView ) {//如果是左侧的直接返回
        return;
    }
    //举例这个每一个必有header，所以使用header判断的，取最小是因为判断点在屏幕顶部
    NSIndexPath *indexPath = [self getMinIndexPathForHeaderView];
    if (!indexPath) { // 没有header的情况
        return;
    }
    KFZAuctionHeadCatModel *headerCatModel = [_categoryHomeModel.localCatList objectAtIndexCheck:indexPath.section];
    KFZAuctionFirstCatModel *currentCatModel = [_categoryHomeModel.localContaniner objectForKey:headerCatModel.localSuperId];
    if (currentCatModel.localSelected) {
        return;
    }
    _categoryHomeModel.localCurrentCatModel.localSelected = NO;
    currentCatModel.localSelected = YES;
    _categoryHomeModel.localCurrentCatModel = currentCatModel;
    [_leftCollectionView reloadData];
    WS(ws)
    [_leftCollectionView performBatchUpdates:nil completion:^(BOOL finished) {
        NSInteger row = [ws.categoryHomeModel.localModelData indexOfObject:currentCatModel];
        [ws.leftCollectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:row inSection:0] atScrollPosition: UICollectionViewScrollPositionCenteredVertically animated:YES];
    }];
}
- (NSIndexPath *)getMinIndexPathForHeaderView{
    NSIndexPath *targetIndexPath;
    NSMutableArray *headerArray = [[_rightCollectionView indexPathsForVisibleSupplementaryElementsOfKind:UICollectionElementKindSectionHeader] mutableCopy];
    if (headerArray.count > 0) {
        NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc] initWithKey:@"section" ascending:YES];
        NSArray *sortDescriptors = [[NSArray alloc] initWithObjects:&sortDescriptor count:1];
        [headerArray sortUsingDescriptors:sortDescriptors];
        if (headerArray.count > 1) {
            targetIndexPath = [headerArray firstObject];
        } else {
            NSIndexPath *indexPath = [headerArray firstObject];
            UICollectionViewLayoutAttributes *attr = [_rightCollectionView.collectionViewLayout layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
            CGRect endFrame = [self.view convertRect:attr.frame fromView:_rightCollectionView];
            }
        }
    }
    if (!targetIndexPath){
        NSMutableArray *itemArray = [[_rightCollectionView indexPathsForVisibleItems] mutableCopy];
        targetIndexPath = [itemArray firstObject];
    }
    return targetIndexPath;
}

第二种

左侧和数据其实和第一种一样。主要是右侧的处理不同，以为要有分页效果，右侧用一个Collection就不行了，我这里使用的Collection套Collection的结构(底层是一个Collection它的cell的大小是整个显示区域然后里再放Collection)，这样在底层左右两个Collection是一一对应的。外层多个小的Collection正常滑动，底层右侧Collection设置pageing效果就可以了。

第三种(第二种优化版)

还是先看效果：

Mar-20-2022 11-04-44.gif

页面大体结构和第二种是一样的。优化的点：
1.右侧paging是怎么切换的，“网易严选”是划不动了然后切换，低层Collection是没有滑动能力的切换的触发是靠外层做的像加载下一页效果一样。然后我这里是通过底层自身的滑动去切换的好处就是手动往下拉的时候能看到下面数据(正常是白色的)。
2.点击左侧切换，从上往下切换时，下一个外层列表默认在顶部；从下往上切换时下一个外层列表默认在底部。代码如下：

- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{
    
    if (collectionView == self.rightCollectionView && collectionView.dragging) {
        KFZCategoryHomeRightCell *rightCell = (KFZCategoryHomeRightCell *)cell;
        if (indexPath.section >= self.selectIndex.section) {
            [rightCell scrollToTop];
        }else if (indexPath.section < self.selectIndex.section) {
            [rightCell scrollToBottom];
        }
    }
}

3.有一部分楼层合并
gif上可以看出来，我这个有一部分是连贯滑动。做法上其实是在数据上就把需要连贯滑动的数据合并到一起，然后在通过代理把外层的刷新回传到底层做的，具体有不少要处理的点，这里就不一一说了，我觉得正常用不到这个，，，