如何让iOS原生APP具有小程序的功能

uni小程序SDK,是为原生App打造的可运行基于 uni-app 开发的小程序前端项目的框架,从而帮助原生App快速获取小程序的能力。
集成SDK我这边不做过多的赘述参考:https://nativesupport.dcloud.net.cn/UniMPDocs/UseSdk/ios 集成就可以。
后面我讲述下如何实现类似微信小程序的功能

IMG_1442.GIF

思路:创建两个界面一个UITableview 一个UIColloectionview 将UIColloectionview 放在一个scrollview上迷啊
监听UITableview 向下滑动的距离 显示头部的组件 到一定的程度设置动画将UITableview整体下移 然后透明度递减
滑动后面的scrollview 监听scroll向上滑动的距离将UITableview 复原透明度逐渐递增
代码如下

#pragma mark - scrollviewdelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//    scrollView.contentOffset = CGPointMake(0, Y);
    if(scrollView == self.tableview){
        CGFloat Y = scrollView.contentOffset.y;
        NSLog(@"Y ===> %lf  yyy===>%lf",Y ,-fabs(Y));
        self.head.frame = CGRectMake(0, -fabs(Y), KScreenWidth, fabs(Y));
        if(Y<-KScreenWidth/3 && !self.isAnimationing){
            self.head.hidden = YES;
            [UIView animateWithDuration:2 animations:^{
                self.isAnimationing = YES;
                self.tableview.alpha = 0.5;
//                self.tableview.transform = CGAffineTransformTranslate(self.tableview.transform, 0, KScreenHeight - 49 - 64);
                self.tableview.frame = CGRectMake(0, KScreenHeight - 49 - 49, KScreenWidth, KScreenHeight-49);
            } completion:^(BOOL finished) {
                self.isAnimationing = NO;
                self.head.hidden = NO;
            }];
        }
    }else if (scrollView == self.scrollView){
        CGFloat Y = scrollView.contentOffset.y;
        NSLog(@"Y ===> %lf",Y );
        if (Y>=100&& !self.isAnimationing) {
            [UIView animateWithDuration:2 animations:^{
                self.tableview.frame = self.view.bounds;
                self.tableview.alpha = 1;
                self.isAnimationing = YES;
            } completion:^(BOOL finished) {
                self.isAnimationing = NO;
            }];
        }
    }
   
}

头部三个点的实现
.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface headLoading : UIView

@end

NS_ASSUME_NONNULL_END

.m

#import "headLoading.h"
@interface headLoading()
@property (nonatomic,strong) UIImageView * point1;
@property (nonatomic,strong) UIImageView * point2;
@property (nonatomic,strong) UIImageView * point3;
@end
@implementation headLoading

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self createSubviews];
//        self.backgroundColor = [UIColor redColor];
    }
    return self;
}
- (void)createSubviews{
    self.point1 = [[UIImageView alloc] init];
    self.point1.image = [UIImage imageNamed:@"yuandian"];
    [self addSubview:self.point1];
    self.point2 = [[UIImageView alloc] init];
    self.point2.image = [UIImage imageNamed:@"yuandian"];
    [self addSubview:self.point2];
    
    self.point3 = [[UIImageView alloc] init];
    self.point3.image = [UIImage imageNamed:@"yuandian"];
    [self addSubview:self.point3];
}

- (void)layoutSubviews{
    CGFloat maxheight = KScreenHeight/4;//向下滑动的的最大具体
    CGFloat pointMaxW = 10;//圆点的最大宽高
    CGFloat pointMaxSpace = 30;//三个圆点的最大距离
    CGFloat frameH = self.frame.size.height;//head的高度
    CGFloat pointSpace = 0;//圆点的初始距离
    CGFloat point1W = pointMaxW *(frameH/maxheight*2);//第一个圆点的宽高
    CGFloat point1X = (KScreenWidth-point1W)/2;//第一个圆点的X
    CGFloat point1Y = (frameH -point1W)/2;//第一个圆点的Y
    CGFloat point2W = 0;//第二个圆点的宽高
    CGFloat point3W = 0;//第三个圆点的宽高
    CGFloat point2X = 0;//第二个圆点的X
    CGFloat point2Y = 0;//第二个圆点的Y
    CGFloat point3X = 0;//第三个圆点的X
    CGFloat point3Y = 0;//第三个圆点的Y
    CGFloat alpha = 1;//透明度
    //动画的三个阶段
    if (frameH<=maxheight/2) {
        //第一阶段中间圆点 由小变大
        point2W = 0;
        point3W = 0;
        point2X = (KScreenWidth-point2W)/2;
        point2Y = (frameH -point2W)/2;
        point3X = (KScreenWidth-point3W)/2;
        point3Y = (frameH -point3W)/2;
    }else if(frameH<=maxheight){
        //第二阶段第一三个原点变化
        point1W = pointMaxW;
        point1X = (KScreenWidth-pointMaxW)/2;
        point1Y = (frameH -pointMaxW)/2;
        pointSpace = pointMaxSpace * ((frameH-maxheight/2)/maxheight*2);
        point2W = point3W = pointMaxW*((frameH-maxheight/2)/maxheight*4);
        if(point2W>pointMaxW){
            point2W = point3W = pointMaxW;
        }
        point2X = (KScreenWidth-point2W)/2 - pointSpace;
        point2Y = (frameH -point2W)/2;
        point3X = (KScreenWidth-point3W)/2+pointSpace;
        point3Y = (frameH -point3W)/2;
    }else{
        //第三阶段 三个原点宽高最大 距离最大 整个组件开始透明度的变化
        point1W = pointMaxW;
        point1X = (KScreenWidth-pointMaxW)/2;
        point1Y = (frameH -pointMaxW)/2;
        pointSpace = pointMaxSpace;
        point2W = point3W = pointMaxW;
        point2X = (KScreenWidth-point2W)/2 - pointSpace;
        point2Y = (frameH -point2W)/2;
        point3X = (KScreenWidth-point3W)/2+pointSpace;
        point3Y = (frameH -point3W)/2;
        alpha =1- (frameH - maxheight)/maxheight;
    }
    self.point1.frame = CGRectMake(point1X, point1Y,point1W, point1W);
    self.point2.frame = CGRectMake(point2X, point2Y,point2W, point2W);
    self.point3.frame = CGRectMake(point3X, point3Y,point3W, point3W);
    self.alpha = alpha;
    
    
}


@end

如果有更好的方法请给我留言

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容