前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >直播卖货小程序源码中,商品分类页面是如何实现的

直播卖货小程序源码中,商品分类页面是如何实现的

原创
作者头像
万岳教育系统
修改2020-07-22 14:25:52
1.1K0
修改2020-07-22 14:25:52
举报

直播卖货小程序源码中,一般都包含商品分类页面,如下图,那么这个页面是如何通过代码实现的呢?下面,小编以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];
}

这样,一个简单地一二级分类就完成了。

以上,就是直播卖货小程序源码中,商品分类页面的实现过程。

声明:以上内容为作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档