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
如果有更好的方法请给我留言