希望有建议可以一起交流。
不累赘多余语言,看效果图:
代码如下
#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:@"https://www.baidu.com"]]];
}
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的是最外层的ScrollView
float 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