1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 淘宝产品详情页 上拉加载图片详情 效果实现

淘宝产品详情页 上拉加载图片详情 效果实现

时间:2023-03-27 18:56:35

相关推荐

淘宝产品详情页 上拉加载图片详情 效果实现

希望有建议可以一起交流。

不累赘多余语言,看效果图:

代码如下

#import "ViewController.h"#import "UIView+Category.h"#define ViewWidth (self.view.width) // 屏幕宽度#define ViewHeight (self.view.height-20) // 屏幕高度【减去的20 为状态栏的高度,如果为全屏显示,就不需要减去20】#define up_down_showLabel_minHeight 30// 提示Label 的最小高度@interface ViewController () <UIScrollViewDelegate>/** 最外层的ScrollView 这里是在Storyboard中拉取的,设置其布局约束为充满整个屏幕这里留出了StatusBar的高度,实际留不留取决与设计*/@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;/** 第一页的 ScrollView */@property (nonatomic, strong) UIScrollView * subScrollView;/** 第二页的 WebView */@property (nonatomic, strong) UIWebView * webView;/** 第一页与第二页过渡时 显示的 提示Label */@property (nonatomic, strong) UILabel * up_down_showLabel;@end@implementation ViewController#pragma mark - 懒加载/** 第一页的 ScrollView */- (UIScrollView *)subScrollView {if (!_subScrollView) {// 将 subScrollView 放在第一页_subScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ViewWidth, ViewHeight)];[_subScrollView setContentSize:CGSizeMake(0, 750)];[_subScrollView setBackgroundColor:[UIColor blueColor]];for (int i = 0; i <= 6; i++) {UIButton * btn = [[UIButton alloc] initWithFrame:CGRectMake(50, 100*i+50, ViewWidth-100, 50)];[btn setBackgroundColor:[UIColor blackColor]];btn.layer.cornerRadius = 10;[btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn setTitle:[NSString stringWithFormat:@"Btn - 0%d", i] forState:UIControlStateNormal];[_subScrollView addSubview:btn];}}return _subScrollView;}/** 第二页的 WebView */- (UIWebView *)webView {if (!_webView) {// 将 webView 放在第二页_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, ViewHeight, ViewWidth, ViewHeight)];[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@""]]];}return _webView;}/** 第一页与第二页过渡时 显示的 提示Label */- (UILabel *)up_down_showLabel {if (!_up_down_showLabel) {_up_down_showLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, ViewWidth, up_down_showLabel_minHeight)];[_up_down_showLabel setBackgroundColor:[UIColor grayColor]];[_up_down_showLabel setTextColor:[UIColor darkGrayColor]];[_up_down_showLabel setTextAlignment:NSTextAlignmentCenter];}return _up_down_showLabel;}- (void)viewDidLoad {[super viewDidLoad];/** 设置最外层 ScrollView 的内容高度 为两页 */[_scrollView setContentSize:CGSizeMake(0, 2*ViewHeight)];/** 首先 将第一页的内容添加 */[_scrollView addSubview:self.subScrollView];}#pragma mark - UIScrollViewDelegate- (void)scrollViewDidScroll:(UIScrollView *)scrollView {// 往往这样的页面 会有多个ScrollView,所以其设置tag,以示区别switch (scrollView.tag) {case 1: { // 这里 tag 为 1的是最外层的ScrollViewfloat offsetY = scrollView.contentOffset.y;if (offsetY>0 && offsetY<ViewHeight*0.5) {// 这种情况为 第一页已到底部,再向下滑动 就要显示第二页的内容/** 将 提示Label显示在第一页底部 */_up_down_showLabel.y = ViewHeight;[_up_down_showLabel setText:@" -- 上拉呀 -- "];[_scrollView addSubview:self.up_down_showLabel];/** 让 提示Label 高度/透明度随滑动位移变化 */[_up_down_showLabel setAlpha:offsetY*1.0f/50];_up_down_showLabel.height = offsetY>up_down_showLabel_minHeight ? offsetY : up_down_showLabel_minHeight;} else if (offsetY>ViewHeight*0.5 && offsetY<ViewHeight) {// 这种情况为 第而页已到顶部,再向上滑动 就要显示第一页的内容[_up_down_showLabel setText:@" - 下拉呀 - "];[_scrollView addSubview:_up_down_showLabel];/** 让 提示Label 高度/透明度随滑动位移变化 */[_up_down_showLabel setAlpha:(ViewHeight-offsetY)*1.0f/50];_up_down_showLabel.height = ViewHeight-offsetY>up_down_showLabel_minHeight ? ViewHeight-offsetY : up_down_showLabel_minHeight;/** 将 提示Label显示在第二页顶部 */_up_down_showLabel.y = ViewHeight-_up_down_showLabel.height;} else if (offsetY == ViewHeight) {// 滑到 第二页的时候if (!_webView) {/** 如果 webView 还没有加载,就加载并添加到视图中 */[_scrollView addSubview:self.webView];}} else {// 其他位置 就移除 提示Label[_up_down_showLabel removeFromSuperview];}} break;}}@end

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。