直播賣貨小程式原始碼中，商品分類頁面是如何實現的

在 直播賣貨小程式原始碼 中，一般都包含商品分類頁面，如下圖，那麼這個頁面是如何透過程式碼實現的呢？下面，小編以iOS版本的開發過程為例，來講述下實現過程。

左邊一級分類使用tableview來展示，右邊的耳機分類使用collectionview來展示，主要就是實現一二級分類的聯動。下面主要講下點選和滑動。

1、左側一級分類的點選實現

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if (indexPath.row != selectTableIndex) {
        //判斷滑動是不是因為點選一級分類引起
        isClickLeft = YES;
        selectTableIndex = indexPath.row;
        [tableView reloadData];
//二級分類滑動到對應的區域
        [_classCollectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:selectTableIndex] atScrollPosition:UICollectionViewScrollPositionTop animated:YES];
        ///讓collectionview的滑動回退sectionheader的高度
        _classCollectionView.contentOffset = CGPointMake(0, _classCollectionView.contentOffset.y-70);
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            isClickLeft = NO;
        });
    }
}

2、在collectionview的代理方法中更改一級分類的選中

///collectionview將要載入頭尾檢視呼叫的方法
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
    if (isClickLeft) {
        return;
    }
    CGPoint point = [view convertPoint:CGPointZero toView:self.view];
    ///判斷是不是SectionHeader
    if (point.y < 100 && [elementKind isEqualToString:UICollectionElementKindSectionHeader]) {
        ///更新當前選中的一級分類的indexpath
        selectTableIndex = indexPath.section;
        [_classTableView reloadData];
    }
}
///collectionview已經載入完頭尾檢視呼叫的方法
 
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
    if (isClickLeft) {
        return;
    }
    CGPoint point = [view convertPoint:CGPointZero toView:self.view];
    ///判斷是不是SectionHeader
    if (point.y < 100 && [elementKind isEqualToString:UICollectionElementKindSectionHeader]) {
        ///更新當前選中的一級分類的indexpath
        selectTableIndex = indexPath.section;
        [_classTableView reloadData];
}

這樣，一個簡單地一二級分類就完成了。

以上，就是 直播賣貨小程式原始碼 中，商品分類頁面 的 實現 過程。

宣告：以上內容為作者本人原創，未經作者本人同意，禁止轉載，否則將追究相關法律責任。