前段时间公司在研发一个电商项目，趁现在有时间把其中的知识点整理整理。
项目的商品详情页面当时是仿制淘宝的，用到的第三方库是mjrefresh，上拉操作和下拉操作的刷新效果是把mjrefresh刷新效果从新建个分类封装了一下，感谢杰哥！！！
基本思路：
1、设置一个 uiscrollview 作为视图底层，并且设置分页为两页
2、然后在第一个分页上添加一个 uitableview 并且设置表格能够上提加载（上拉操作即为让视图滚动到下一页）
3、 在第二个分页上添加一个 uiscrollview 并且设置能有下拉刷新操作（下拉操作即为让视图滚动到上一页）
4、第二个分页uiscrollview添加子uiview，一般式商品的图文详情、产品参数、店铺等
5、demo只提供简单的思路，项目具体实现基本相同
|
1
2
3
4
5
6
7
8
9
10
|
/** 封装刷新 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" |
主要代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
- (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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
#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;} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
