iOS仿淘寶詳情頁,支付寶首頁上滑效果
功能需求
最近需要修改商品詳情頁,其他沒什麼就是一個多種Cell的列表,關鍵是其中的一個效果不太好實現。
要求輪播圖滑動的速率慢於輪播圖以下部分滑動的速率。給人一種輪播圖被遮蓋的錯覺。
主要思路
剛開始感覺就是用tableView可以搞定,結果無論我怎麼寫,都不會有這種遮蓋效果。只好問度娘,還真有人寫出來了,大概原理如下:首先需要用到scrollView和tableView兩個主要控制元件。將輪播圖部分和tableView部分子上而下的放到scrollView上面,然後給足tableView所使用的高度,只能大不能小。這一點很重要,只有將tableView的高度給夠了,tableView才不會滑動(這個思路很巧妙)。再根據實際需要設定scollView的contentSize。然後再在- (void)scrollViewDidScroll:(UIScrollView *)scrollView的方法中設定輪播圖的和tableView的frame和origin,將輪播圖的origin設定成偏移量的二分之一。將tableView的origin設定成偏移量。
程式碼實現
#import "GoodsDetail1ViewController.h"
@interface GoodsDetail1ViewController ()<UITableViewDelegate, UITableViewDataSource, APIRequestDelegate>
@property (nonatomic, strong)UIScrollView *scrollView;
@property (nonatomic, strong)UIView *topView;
@property (nonatomic, strong)UIView *topBannerView;
@implementation GoodsDetail1ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT +50)];
self.scrollView.contentSize = CGSizeMake(0, SCREEN_HEIGHT * 8);
self.scrollView.delegate = self;
self.scrollView.bounces = YES;
[self.view addSubview:self.scrollView];
self.topView = [[UIView alloc]initWithFrame: CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH)];
self.topView.backgroundColor = [UIColor yellowColor];
self.topBannerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
self.topBannerView.backgroundColor = [UIColor whiteColor];
[self.topView addSubview:self.topBannerView];
[self.scrollView addSubview:self.topView];
self.goodsDataTableview1 = [[UITableView alloc]initWithFrame:CGRectMake(0, SCREEN_WIDTH, SCREEN_WIDTH, SCREEN_HEIGHT * 9) style:UITableViewStylePlain];
self.goodsDataTableview1.backgroundColor = [UIColor colorWithHexColorString:@"ededed"];
self.goodsDataTableview1.delegate = self;
self.goodsDataTableview1.dataSource = self;
self.goodsDataTableview1.bounces = NO;
self.goodsDataTableview1.scrollEnabled = NO;
[self.scrollView addSubview:self.goodsDataTableview1];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView == self.scrollView) {//對其偏移量進行設定。
CGFloat offsetY = scrollView.contentOffset.y;
if (offsetY <= 0) {
CGRect rect = self.topView.frame;
rect.origin.y = offsetY;
self.topView.frame = rect;
rect = self.goodsDataTableview1.frame;
rect.origin.y = offsetY + SCREEN_WIDTH;
self.goodsDataTableview1.frame = rect;
rect = self.topBannerView.frame;
rect.origin.y = 0;
self.topBannerView.frame = rect;
} else {
CGRect rect = self.topBannerView.frame;
rect.origin.y = offsetY / 2;
self.topBannerView.frame = rect;
}
}
}
以上只是部分程式碼,提示提供個思路餘下的部分還得需要你自己親自實現。
參考文件
相關文章
- JS仿淘寶詳情頁選單條智慧定位效果JS
- 仿網易雲和支付寶首頁巢狀滑動巢狀
- iOS 模仿淘寶的首頁UIiOSUI
- 自定義 behavior 完美仿 QQ 瀏覽器首頁,美團商家詳情頁瀏覽器
- iOS-多個UIScrollView滑動巢狀(仿微博、抖音、網易雲個人詳情頁)iOSUIView巢狀
- UITableview巢狀UITableView案例實踐(仿淘寶商品詳情頁實現)UIView巢狀
- 採集淘寶商品詳情頁資料
- 仿噹噹App首頁按鈕漸變動畫效果APP動畫
- 淘寶API系列:如何採集淘寶商品詳情頁資料?API
- 仿京東、淘寶首頁,通過兩層巢狀的RecyclerView實現tab的吸頂效果巢狀View
- !!!網頁詳情頁成功!!!網頁
- 高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView客戶端框架View
- 淘寶拼多多京東上貨必備API 商品詳情頁資料抓取 APP商品詳情原資料APIAPP
- (六)仿QQ首頁drawer/側滑刪除/浮動imgaeView/角標拖拽View
- 仿知乎首頁學習 CoordinateLayout
- jQuery Mobile仿360首頁,jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁jQueryHTML
- canvas模擬eharts首頁動畫效果Canvas動畫
- 初學CSS仿QQ郵箱首頁介面CSS
- iOS首頁渲染優化 -- imageName:iOS優化
- uniapp---app滑動翻頁(上滑、下滑、左滑、右滑)APP
- 詳情頁返回列表頁恢復滾動位置
- 小程式列表頁上滑載入更多配合 Laravel 分頁Laravel
- Flutter開發實戰 高仿微信(1)首頁Flutter
- 數控開發 · 元件 · 仿微信的首頁面元件
- 仿淘寶、京東拖拽商品詳情(可巢狀ViewPager、ListView、WebView、FragmentTabhost)巢狀ViewpagerWebViewFragment
- Swift-低仿搜狐新聞標籤頁效果Swift
- ai網頁詳情頁-測試-只差樣式修改網頁
- 仿 “即刻APP” 滑動返回的效果APP
- 使用UICollectionView實現首頁的滾動效果UIView
- iOS高仿美團外賣店鋪主頁iOS
- 電商平臺的商品詳情頁如何排版?輕鬆搞定詳情頁的排版設計!
- 淘寶詳情api介面API
- ai網頁詳情頁-測試-api呼叫成功返圖!網頁
- CSS實現頁面切換時的滑動效果CSS
- 仿蘋果版小黃車(ofo)app主頁選單效果蘋果APP
- 高仿京東到家APP引導頁炫酷動畫效果APP動畫
- JS 網頁列印 頁邊距 頁首頁尾JS網頁
- JavaScript數字分頁效果詳解JavaScript