当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS项目开发--实现类似淘宝详情页面

iOS项目开发--实现类似淘宝详情页面

2019年07月24日  | 移动技术网移动技术  | 我要评论

前段时间公司在研发一个电商项目，趁现在有时间把其中的知识点整理整理。

项目的商品详情页面当时是仿制淘宝的，用到的第三方库是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;
}

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网