欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-22 11:21:52
前段时间公司在研发一个电商项目,趁现在有时间把其中的知识点整理整理。 项目的商品详情页面当时是仿制淘宝的,用到的第三方库是mjrefresh,上拉操作和下拉操作的刷新...

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

项目的商品详情页面当时是仿制淘宝的,用到的第三方库是mjrefresh,上拉操作和下拉操作的刷新效果是把mjrefresh刷新效果从新建个分类封装了一下,感谢杰哥!!!

基本思路:

1、设置一个 uiscrollview 作为视图底层,并且设置分页为两页

2、然后在第一个分页上添加一个 uitableview 并且设置表格能够上提加载(上拉操作即为让视图滚动到下一页)

3、 在第二个分页上添加一个 uiscrollview 并且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页)

4、第二个分页uiscrollview添加子uiview,一般式商品的图文详情、产品参数、店铺等

5、demo只提供简单的思路,项目具体实现基本相同
iOS项目开发--实现类似淘宝详情页面

 /** 封装刷新 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;
}

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: