iOS项目开发--实现类似淘宝详情页面
程序员文章站
2023-12-22 11:21:52
前段时间公司在研发一个电商项目,趁现在有时间把其中的知识点整理整理。
项目的商品详情页面当时是仿制淘宝的,用到的第三方库是mjrefresh,上拉操作和下拉操作的刷新...
前段时间公司在研发一个电商项目,趁现在有时间把其中的知识点整理整理。
项目的商品详情页面当时是仿制淘宝的,用到的第三方库是mjrefresh,上拉操作和下拉操作的刷新效果是把mjrefresh刷新效果从新建个分类封装了一下,感谢杰哥!!!
基本思路:
1、设置一个 uiscrollview 作为视图底层,并且设置分页为两页
2、然后在第一个分页上添加一个 uitableview 并且设置表格能够上提加载(上拉操作即为让视图滚动到下一页)
3、 在第二个分页上添加一个 uiscrollview 并且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页)
4、第二个分页uiscrollview添加子uiview,一般式商品的图文详情、产品参数、店铺等
5、demo只提供简单的思路,项目具体实现基本相同
/** 封装刷新 mjrefresh */ #import "qrg_mjrefreshautofooter.h" #import "qrg_mjrefreshnormalheader.h" #import "collectionviewcell.h" #define width [uiscreen mainscreen].bounds.size.width #define height [uiscreen mainscreen].bounds.size.height #define arccolor (arc4random() % 255/256.0) #import "viewcontroller.h"
主要代码
- (void)viewdidload { [super viewdidload]; /** 底层view*/ uiscrollview *mainscrollview = [[uiscrollview alloc] init]; mainscrollview.scrollenabled = no; mainscrollview.frame = cgrectmake(0, 0, width, height); mainscrollview.contentsize = cgsizemake(width, height * 2); mainscrollview.backgroundcolor = [uicolor greencolor]; mainscrollview.pagingenabled = yes; mainscrollview.bounces = yes; [self.view addsubview:mainscrollview]; /** 第一页面 table*/ onetable = [[uitableview alloc] init]; onetable.frame = cgrectmake(0,0, width, height - 64); onetable.separatorcolor = [uicolor greencolor]; onetable.delegate = self; onetable.datasource = self; onetable.rowheight = 80; [mainscrollview addsubview:onetable]; /** 第二页面 scrollview*/ uiscrollview *twoscrollview = [[uiscrollview alloc] init]; twoscrollview.frame = cgrectmake(0, height + 64, width, height - 64); twoscrollview.contentsize = cgsizemake(width * 3, height - 64); twoscrollview.backgroundcolor = [uicolor cyancolor]; twoscrollview.pagingenabled = yes; twoscrollview.bounces = no; [mainscrollview addsubview:twoscrollview]; /** 第二页面 table*/ twotable = [[uitableview alloc] init]; twotable.frame = cgrectmake(width, 0, width, height - 64); twotable.separatorcolor = [uicolor redcolor]; twotable.delegate = self; twotable.datasource = self; [twoscrollview addsubview:twotable]; /** 第二页面 uicollectionview*/ uicollectionviewflowlayout *flow = [[uicollectionviewflowlayout alloc] init]; [flow setscrolldirection:uicollectionviewscrolldirectionvertical]; uicollectionview *twocollectionview = [[uicollectionview alloc] initwithframe:cgrectmake(0, 0, width, height - 64) collectionviewlayout:flow]; twocollectionview.backgroundcolor = [uicolor lighttextcolor]; twocollectionview.delegate = self; twocollectionview.datasource = self; [twoscrollview addsubview:twocollectionview]; // [twocollectionview registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:@"coll"]; [twocollectionview registernib:[uinib nibwithnibname:@"collectionviewcell" bundle:nil] forcellwithreuseidentifier:@"coll"]; //设置uitableview 上拉加载 onetable.mj_footer = [qrg_mjrefreshautofooter footerwithrefreshingblock:^{ //上拉,执行对应的操作---改变底层滚动视图的滚动到对应位置 //设置动画效果 [uiview animatewithduration:0.5 delay:0.0 options:uiviewanimationoptionlayoutsubviews animations:^{ // self.scrollv.contentoffset = cgpointmake(0, iphone_h); [mainscrollview setcontentoffset:cgpointmake(0, height)]; } completion:^(bool finished) { //结束加载 [onetable.mj_footer endrefreshing]; }]; }]; //设置twocollectionview 有下拉操作 twocollectionview.mj_header = [qrg_mjrefreshnormalheader headerwithrefreshingblock:^{ //下拉执行对应的操作 // self.scrollv.contentoffset = cgpointmake(0,0); [uiview animatewithduration:1 animations:^{ [mainscrollview setcontentoffset:cgpointmake(0, - 64)]; }]; //结束加载 [twocollectionview.mj_header endrefreshing]; }]; //设置twotable 有下拉操作 twotable.mj_header = [qrg_mjrefreshnormalheader headerwithrefreshingblock:^{ //下拉执行对应的操作 // self.scrollv.contentoffset = cgpointmake(0,0); [uiview animatewithduration:1 animations:^{ [mainscrollview setcontentoffset:cgpointmake(0, - 64)]; }]; //结束加载 [twotable.mj_header endrefreshing]; }]; }
pragma mark---------delegate
#pragma mark---------tabledelegate - (cgfloat)tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath { cgfloat height; if([tableview isequal:onetable]) { height = 80; }else { return 120; } return height; } - (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section { return 10; } - (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static nsstring *cell = @"cell"; uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:cell]; if(!cell) { cell = [[uitableviewcell alloc]initwithstyle:uitableviewcellstyledefault reuseidentifier:cell]; } cell.textlabel.text = [nsstring stringwithformat:@"%ld--askl",indexpath.row]; cell.imageview.image = [uiimage imagenamed:@"6"]; return cell; } #pragma mark---------collectionviewdelegate - (nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section { return 20; } - (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath { return cgsizemake(150, 100); } - (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath { static nsstring *coll = @"coll"; collectionviewcell *cell = [collectionview dequeuereusablecellwithreuseidentifier:coll forindexpath:indexpath]; // cell.backgroundcolor =[uicolor greencolor]; return cell; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读