美文网首页
淘宝界面布局解决方案

淘宝界面布局解决方案

作者: smkoc | 来源:发表于2017-11-06 15:17 被阅读0次

    1.1 界面效果图

    屏幕快照 2017-11-06 下午3.09.37.png

    Github地址

    1.2 实现原理

    1.2.1定义Model5中不同类型的Cell
    /**
     * 商城
     */
    typedef NS_ENUM(NSUInteger, TemplateCellType) {
        
        //轮播Cell
        TemplateCellTypeShopingBanderTableViewCell = 1,
        
        //分类Cell
        TemplateCellTypeClassifiedTableViewCell ,
     
        //必买Cell
        TemplateCellTypeDailyWillBuyTableViewCell ,
        
        //推荐Cell
        TemplateCellTypeRecommendTableViewCell = 15,
     
        //新寓故事Cell
        TemplateCellTypeThePoorTableViewCell = 4,
    };
    
    

    1.2.2 根据返回的template_type 构建不同的数据模型且对应不同的Cell

       [EXSeviceRequestManger GetWithShopInterfaceCompleteSuccessfull:^(id responseObject) {
                NSArray *tempShopMalls = [EXShopModel mj_objectArrayWithKeyValuesArray:responseObject];
                for (EXShopModel *model in tempShopMalls) {
                    switch (model.template_type) {
                        case TemplateCellTypeShopingBanderTableViewCell:{
                            model.ClassName  = @"HSYShopingBanderTableViewCell";
                            NSMutableArray *datas = [NSMutableArray arrayWithObject:model];
                            model.sections = datas;
                            break;
                        }
                        case TemplateCellTypeRecommendTableViewCell:
                        {
                            model.ClassName  = @"HSYRecommendTableViewCell";
                            NSMutableArray *datas = [NSMutableArray arrayWithArray:model.datas];
                            model.sections = datas;
                            break;
                        }
                        case TemplateCellTypeClassifiedTableViewCell:{
                            model.ClassName  = @"HSYClassifiedTableViewCell";
                            NSMutableArray *datas = [NSMutableArray arrayWithObject:model];
                            model.sections = datas;
                            break;
                        }
                        case TemplateCellTypeDailyWillBuyTableViewCell:{
                            model.ClassName  = @"HSYDailyWillBuyTableViewCell";
                            NSMutableArray *datas = [NSMutableArray arrayWithObject:model];
                            model.sections = datas;
                            break;
                        }
                        case TemplateCellTypeThePoorTableViewCell:{
                            model.ClassName  = @"HSYThePoorTableViewCell";
                            if (model.datas.count) {
                                model.sections = [self ToConvertAnArrayType:model.datas  type:model.interfaceType];
                            }else{
                                [self InitDataCannelIdWithModel:model cell:nil];
                            }
                            break;
                        }
                        default:{
                            break;
                        }
                    }
                    [self.shoppingMalls addObject:model];
                }
    

    1.2.2 根据对应的类型跳转对应的界面

    typedef NS_ENUM(NSUInteger, EXXBaseTableViewCellTouchType) {
        /**
         商品
         */
        EXBaseTableViewCellTouchTypeGOOD = 100,
        /**
         视频
         */
        EXBaseTableViewCellTouchTypeVIDEO,
        /**
         代言活动
         */
        EXBaseTableViewCellTouchTypeACTIVITY,
        /**
         展示
         */
        EXBaseTableViewCellTouchTypeREPRESENT,
        /**
         
         */
        EXBaseTableViewCellTouchTypeARTIS,
        /**
         轮播
         */
        EXBaseTableViewCellTouchTypeBANNER,
        /**
         频道
         */
        EXBaseTableViewCellTouchTypeCHANNEL,
        /**
         更多
         */
        EXBaseTableViewCellTouchTypeEVENMORE,
        
    };
    

    1.2.4 对应的点击事件,对应的跳转

    #pragma mark CJXBaseTableViewCellActionProtocol
    -(void)didSelectItemAtType:(EXXBaseTableViewCellTouchType)type model:(EXShopModel *)model atSectionModel:(EXShopModel*) atSectionModel{
        switch (type) {
            case EXBaseTableViewCellTouchTypeGOOD:{
                EXGoodsRecommendViewController *vc = [[EXGoodsRecommendViewController alloc] init];
                if ([model.MIME isEqualToString:@"APPLICATION/BANNER"]) {
                    vc.relatedId = model.related_id.integerValue;
                    vc.agentUser =model.agent_user;
                }else{
                    vc.relatedId = model.ID.integerValue;
                    vc.agentUser =model.shop.userId;
                }
                [self.navigationController pushViewController:vc animated:YES];
                break;
            }
            case EXBaseTableViewCellTouchTypeACTIVITY:{
          
                break;
            }
            case EXBaseTableViewCellTouchTypeVIDEO:{
          
                break;
            }
            case EXBaseTableViewCellTouchTypeARTIS:{
        
                break;
            }
                
            case EXBaseTableViewCellTouchTypeBANNER:{
                break;
            }
                
            case EXBaseTableViewCellTouchTypeCHANNEL:{
        
                
                break;
            }
            case EXBaseTableViewCellTouchTypeREPRESENT:{
      
                break;
            }
            case EXBaseTableViewCellTouchTypeEVENMORE:{
        
                break;
            }
            default:
                break;
        }
    }
    

    总结

    根据数据模型选择对应的Cell,根据对应Cell 的点击类型。跳转到对应的界面(可以用路由模式)。我用枚举定义不同的类型。来简化路由模式。

    相关文章

      网友评论

          本文标题:淘宝界面布局解决方案

          本文链接:https://www.haomeiwen.com/subject/seelmxtx.html