1. 程式人生 > >iOS 類似淘寶商品詳情檢視翻頁效果的實現

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 類似商品詳情檢視效果實現

基本思路: 1、設定一個 UIScrollView 作為檢視底層,並且設定分頁為兩頁 2、然後在第一個分頁上新增一個 UITableView 並且設定表格能夠上提載入(上拉操作即為讓檢視滾動到下一頁) 3、 在第二個分頁上新增一個 UIWebView 並且

iOS 相似商品詳情查看效果實現

nim anim bool with animate resource tlab 更改 tro 基本思路: 1、設置一個 UIScrollView 作為視圖底層,而且設置分頁為兩頁 2、然後在第一個分頁上加入一個 UITableView 而且設置表格

Android仿京東、商品詳情上拉檢視更多詳情

老規矩,先上圖,沒圖說個J8 高清原圖GIF圖,請移步:https://github.com/kangkanger/SlideSeeMoreLayout/blob/master/screenshots/2.gif 相信現在只要做電商的APP,95%的UI設計師都會抄這個介面,所以把

仿商品詳情,上拉檢視更多詳情demo(Activity和Fragment)。2種應用場景

最近專案中有個功能,在課程播放頁,有個講師詳情頁:上面展示文字資訊,下面展示一個webView,但是webView,要通過上拉才出現。網上找的一個開源的demo。對裡面進行了一定的修改,以符合專案要求: https://github.com/cnbleu/

vue實現商品詳情屬性選擇功能

line pan func sel eth AD 圖片 [1] urn 方法一是自己想出來的,方法二來自忘記哪裏看到的了 不知道是不是你要的效果: 方法一:利用input[type="radio"] css代碼: 1 input { 2

Android開發仿商品詳情瀏覽效果 兩步曲

效果圖: 第一步佈局檔案: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr

vue實現星級評價及上傳多張圖片等功能(類似商品評價頁面)

最近在寫一個關於vue的商城專案,然後整合在移動端中,開發需求中有一介面,類似淘寶商城評價介面!實現效果圖如下所示: 評價頁 點選看大圖,且可左右滑動 功能需求分析 預設為5顆星,為非常滿意,4顆滿意,根據不同星級顯示不同滿意程度。 2.評價內容,最

微信小程式視訊層級過高問題與商品詳情相簿展示效果

1.效果圖 2.html <view class="banner" > <view class='current_num'>{{current}}/{{imgNum}}</view> <swiper circular duration=

Android 仿商品詳情標題欄變色,佈局層疊效果

如圖效果 思路:如圖可以將圖片中佈局分成三個部分,1標題欄透明背景,2上半部分佈局,3下半部分佈局,當我們向上拉動的時候,1佈局實現漸變,從透明變到白色,2佈局背景色漸變到白色,23佈局隨滾動條上拉,並且慢慢改變2佈局paddingtop的屬性,其中1佈局漂浮在整個scro

仿商品詳情TabLayout+ListView

第一次寫部落格,我是一名Android的小碼農寫程式碼也有三四年了。有點好玩的跟大家分享一下 專案對商品詳情頁改版有新需求。頂部是一個漸變的Title包括“寶貝”,“詳情”,“推薦”三個文字,下邊是一個豎向滑動的列表顯示商品詳情和推薦商品。要求兩部分關聯起來,也就是點橫向的

Android 仿商品詳情下拉足跡Demo

DropDownMultiPager 仿淘寶等商品詳情頁下拉足跡效果SimpleDemo 可colne之後看MainActivity的呼叫,方便二次開發 依賴 compile 'com.nin

仿商品詳情頁面Android

1、需求: 要實現一個類似淘寶、京東的商品詳情頁面。首先是在看一些前輩的思路,檢視之後,發現博主qifengdeqingchen的文章不錯,然後去下載下來檢視demo。 2、查閱資料 來看看前輩的思路圖。使用兩個scrollView,兩個scr

Android開發之仿商品詳情

看到有人在問如何實現淘寶商品詳情頁效果,手癢了就擼了一個,獻上效果圖 大致梳理一下思路,這裡不提供原始碼 狀態列透明使用開源庫StatusBarCompat,為了相容手機4.4 dependencies { compile ('com.

仿商品詳情[帶有視訊和圖片的輪播功能]

因為工作需求的原因,自己寫了一個demo,既實現了功能,又能與大家分享,很高興!Demo已上傳GitHub,https://github.com/xinniangdeweidao/CloneTaobaoProductsDetails.git 轉載請註明出處,謝謝!

環信整合自定義傳送類似商品資訊條目

1.專案背景 出於專案的需要,今日一直研究環信整合的IM 傳送類似淘寶商品連結的item ,小有成就 特在此分享: 電商中的及時聊天一般都要把商品的資訊傳送給賣家,以方便雙方的交流,由於之前借鑑 了網上的一些例子,故個別欄位和主題有點出入: 2.具體

仿商品詳情中(繼續拖動到圖文詳情

核心view 有2個 一個是自定義的ViewGroup 一個是自定義的ScrollView 首先是自定義的ScrollView public class MyScrollView extends ScrollView { public My

利用ionic裡的和 modal 做個仿商品詳情頂部輪播圖的demo

做這個demo之前首先得了解淘寶app商品詳情頁頂部輪播圖都有哪些構造。 1.幾張圖片輪播展示; 2.點選圖片出現全屏圖片輪播展示; 3.點選第幾張圖,全屏展示對應圖片; 4.全屏展示的圖片可以拖拽放大; 5.全屏圖片可以長按儲存。(這點在這個demo中不會出現,因為博主這

【商城開發三】Android 仿商品詳情下拉足跡修改版

開發商城的快有半個月了,需要做到詳情頁下拉足跡的效果,網上找了找沒找到,找到一個差不多還有點問題,然後在基礎上進行了二次開發 感謝http://blog.csdn.net/yaphetzhao/article/details/53736471  YaphetZhao的部落格

Vue實現仿商品詳情屬性選擇的功能

先看下效果圖:(同個屬性內部單選,屬性與屬性之間可以多選) 主要實現過程: 所使用到的資料型別是(一個大數組裡面嵌套了另一個數組)具體格式如下: attrAndValuees: [ { 'attrId': 1,

Android之仿商品詳情瀏覽效果

-----------------轉載請註明出處:http://blog.csdn.net/android_cll 一:先來幾張效果圖,沒有弄gif動畫,也就是商品詳情滑動到底部繼續上滑檢視圖文詳情、 二:實現步驟:   1.自定義一個父容器ScrollVi