iOS 相似淘宝商品详情查看翻页效果的实现
基本思路:
1、设置一个 UIScrollView 作为视图底层,而且设置分页为两页
2、然后在第一个分页上加入一个 UITableView 而且设置表格可以上提载入(上拉操作即为让视图滚动到下一页)
3、 在第二个分页上加入一个 UIWebView 而且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页)
ps:以上所提及UITableView与UIWebView 可以自行更改为其它滚动控件也是可行的
实现须要的第三方支持:MJRefresh
关于此第三方,可參考:githua 地址 请点击此处
下面是详细代码实现:
定义宏:
#define IPHONE_W ([UIScreen mainScreen].bounds.size.width)
#define IPHONE_H ([UIScreen mainScreen].bounds.size.height)
@interface 部分
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(strong,nonatomic)UIScrollView *scrollV;
@property(strong,nonatomic)UITableView *tableV;
@property(strong,nonatomic)UIWebView *webV;
@end
@implementation 部分
- (void)viewDidLoad {
[super viewDidLoad];
//控件加入到视图上
/**
* 设置一个 UIScrollView 作为视图底层,而且设置分页为两页
* 然后在第一个分页上加入一个 UITableView 而且设置表格可以上提载入(上拉操作即为让视图滚动到下一页)
在第二个分页上加入一个 UIWebView 而且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页)
*/
[self.view addSubview:self.scrollV];
[self.scrollV addSubview:self.tableV];
[self.scrollV addSubview:self.webV];
//设置UITableView 上拉载入
self.tableV.footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
//上拉。运行相应的操作---改变底层滚动视图的滚动到相应位置
//设置动画效果
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.scrollV.contentOffset = CGPointMake(0, IPHONE_H);
} completion:^(BOOL finished) {
//结束载入
[self.tableV.footer endRefreshing];
}];
}];
//设置UIWebView 有下拉操作
self.webV.scrollView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//下拉运行相应的操作
self.scrollV.contentOffset = CGPointMake(0, 0);
//结束载入
[self.webV.scrollView.header endRefreshing];
}];
}
-(void)viewWillAppear:(BOOL)animated
{
[self.webV loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
}
#pragma mark -- UITableView DataSource && Delegate
//返回表格分区行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
//定制单元格内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
cell.textLabel.text = [NSString stringWithFormat:@"%ld--%ld",indexPath.section,indexPath.row];
return cell;
}
#pragma mark ---- get
-(UIScrollView *)scrollV
{
if (_scrollV == nil)
{
_scrollV = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H)];
_scrollV.contentSize = CGSizeMake(IPHONE_W, IPHONE_H * 2);
//设置分页效果
_scrollV.pagingEnabled = YES;
//禁用滚动
_scrollV.scrollEnabled = NO;
}
return _scrollV;
}
-(UITableView *)tableV
{
if (_tableV == nil)
{
_tableV = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H) style:UITableViewStylePlain];
_tableV.delegate = self;
_tableV.dataSource = self;
}
return _tableV;
}
-(UIWebView *)webV
{
if (_webV == nil)
{
_webV = [[UIWebView alloc]initWithFrame:CGRectMake(0, IPHONE_H, IPHONE_W, IPHONE_H)];
}
return _webV;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
欢迎交流:::::demo 下载:点此 DEMO 下载
iOS 相似淘宝商品详情查看翻页效果的实现的更多相关文章
- iOS app url scheme跳转到淘宝商品详情页 唤醒app
最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...
- 仿淘宝商品详情页上拉弹出新ViewController
新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- iOS:横向使用iPhone默认的翻页效果
大致思路使用两层辅助UIView的旋转来实现添加后的View的横向翻页效果 CATransform3D transformA = CATransform3DRotate(CATransform3DId ...
- 第十二篇、OC_仿淘宝商品详情页的翻页
// // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...
- Android开发案例 - 淘宝商品详情
所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPa ...
- Android开发案例 - 淘宝商品详情【转】
http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等 ...
- Android之淘宝商品列表长按遮罩效果
先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...
- android仿京东、淘宝商品详情页上拉查看详情
话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...
随机推荐
- 爬虫开发python工具包介绍 (4)
本文来自网易云社区 作者:王涛 此处我们给出几个常用的代码例子,包括get,post(json,表单),带证书访问:Get 请求 @gen.coroutine def fetch_url(): ...
- POJ 1606 Jugs
Jugs Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4280 Accepted: 2533 Special Ju ...
- RabbitMQ的transaction、confirm、ack三个概念的解释
在使用RabbitMQ的过程中,肯定会遇到这样的几个概念:transaction.confirm.ack.本文介绍一下这几个概念,以及他们之间的关系. RabbitMQ是采用的AMQP协议,AMQP协 ...
- [BZOJ2523][Ctsc2001]聪明的学生
[BZOJ2523][Ctsc2001]聪明的学生 试题描述 一位教授逻辑学的教授有三名非常善于推理且精于心算的学生A,B和C.有一天,教授给他们三人出了一道题:教授在每个人脑门上贴了一张纸条并告诉他 ...
- BZOJ 1009 [HNOI2008]GT考试 ——矩阵乘法 KMP
先用KMP处理所有的转移,或者直接暴力也可以. 然后矩阵快速幂即可. #include <cstdio> #include <cstring> #include <ios ...
- lua学习随笔
1.1 Chunks 1.2 全局变量 访问一个没有初始化的全局变量也不会出错,只不过的到的结果是nil 如果想删除一个全局变量,只需要将变量赋值为nil 1.3 词法约定 标识符 保留字不能作为 ...
- 稻草人(bzoj 4237)
Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要 ...
- 垃圾收集器与内存分配策略 (深入理解JVM二)
1.概述 垃圾收集(Garbage Collection,GC). 当需要排查各种内存溢出.内存泄露问题时,当垃圾收集成为系统达到更高并发量的瓶颈时,我们就需要对这些“自动化”的技术实施必要的监控和调 ...
- hdu1671 Phone List [字典树 hash]
传送门 Phone List Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- CF 2018 Battle of Brains GYM 102062 F
https://codeforces.com/gym/102062/attachments/download/8213/2018-battle-of-brains-en.pdf https://cod ...