iOS 实现类似抖音翻页滚动效果

devtools/2024/12/5 6:47:15/

这里是效果图
请添加图片描述

参考抖音的滚动效果,需要我们在结束拖动的时候,动画设置偏移量
这里有一个注意点,由于我们是在拖动结束的时候,手动改变tableview的偏移量,
改变了tableView 自身原有的的滚动效果,所以我们
需要讲tableView 的frame的高度设置为三个cell的高度,然后,设置contentInset
的顶部和底部都是cell的高度,否则会导致我们滚动的过程中cell还没有加载出来
,展示成一片空白的效果

直接上代码

//
//  DouyinScrollViewController.m
//  TEXT
//
//  Created by mac on 2024/4/28.
//  Copyright © 2024 刘博. All rights reserved.
//#import "DouyinScrollViewController.h"
#import "DouyinScrollTableViewCell.h"static CGFloat const height = 700;@interface DouyinScrollViewController () <UITableViewDelegate, UITableViewDataSource>@property (nonatomic, strong) UITableView *tableView;@property (nonatomic, assign) NSInteger currentIndex;@property (nonatomic, assign) CGFloat velocity;@property (nonatomic, strong) NSMutableArray *colorArray;@end@implementation DouyinScrollViewController- (void)viewDidLoad {[super viewDidLoad];[self.view addSubview:self.tableView];self.colorArray = [NSMutableArray array];for (int i = 0; i < 10; i ++) {int r = arc4random() % 255;int g = arc4random() % 255;int b = arc4random() % 255;CGFloat rr = r / 255.0;CGFloat rg = g / 255.0;CGFloat rb = b / 255.0;UIColor *color = [[UIColor alloc]initWithRed:rr green:rg blue:rb alpha:1];[self.colorArray addObject:color];}[self.tableView reloadData];// Do any additional setup after loading the view.
}#pragma mark - UITableViewDelegate, UITableViewDataSource- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{DouyinScrollTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];[cell updateWithColor:self.colorArray[indexPath.row]];//    cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];//    cell.backgroundColor = self.colorArray[indexPath.row];//    if (!cell.contentView.backgroundColor) {//        cell.contentView.backgroundColor = self.colorArray[indexPath.row];//    }//    return cell;return cell;
}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{return 10;
}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{return height;
}#pragma mark - scrolllVIewDelegate- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{}- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{self.velocity = velocity.y;
}- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{dispatch_async(dispatch_get_main_queue(), ^{CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView];//UITableView禁止响应其他滑动手势scrollView.panGestureRecognizer.enabled = NO;CGFloat translateCheck = 60;NSLog(@"哈哈哈哈获取停止拖动时候的速度%f", self.velocity);if (fabs(self.velocity) > 0.4) {translateCheck = 8;}if(translatedPoint.y < -translateCheck && self.currentIndex < 10) {self.currentIndex ++;   //向下滑动索引递增}if(translatedPoint.y > translateCheck && self.currentIndex > 0) {self.currentIndex --;   //向上滑动索引递减}[UIView animateWithDuration:0.15delay:0.0options:UIViewAnimationOptionCurveEaseOut animations:^{//UITableView滑动到指定cell[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.currentIndex inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];} completion:^(BOOL finished) {//UITableView可以响应其他滑动手势scrollView.panGestureRecognizer.enabled = YES;}];});
}#pragma mark - lazy load- (UITableView *)tableView
{if (!_tableView) {_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 60 - height, CGRectGetWidth(self.view.bounds), height * 3) style:UITableViewStylePlain];[_tableView registerClass:[DouyinScrollTableViewCell class] forCellReuseIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];_tableView.rowHeight = height;_tableView.contentInset = UIEdgeInsetsMake(height , 0, height, 0);_tableView.estimatedRowHeight = height;_tableView.delegate = self;_tableView.dataSource = self;_tableView.backgroundColor = [UIColor redColor];_tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;_tableView.separatorInset = UIEdgeInsetsZero;}return _tableView;
}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {// Get the new view controller using [segue destinationViewController].// Pass the selected object to the new view controller.}*/@end

http://www.ppmy.cn/devtools/23867.html

相关文章

银河麒麟V10 ARM64 离线安装 新版Docker

查询当前发行版本 nkvers下载最新版本 卸载旧依赖 卸载已经安装的老版本 yum remove docker \containerd.io \docker-runc \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine \docker-compo…

隧道智能巡检机器人:科技助力隧道维护与管理

在现代社会&#xff0c;隧道已经成为城市、交通网络和基础设施的重要组成部分。尽管如此&#xff0c;隧道的安全运营和维护仍然存在着各种挑战。传统的隧道巡查方式主要依赖于人工巡检&#xff0c;但这种方式存在诸多问题&#xff0c;如工作负荷大、检测标准不统一、效率低下、…

【Vue】Pdf转图片功能+多张图片拼接封装

Pdf转图片功能多张图片拼接封装 HTML页面tools.js文件 HTML页面 <template><div class"main-marge"><div class"box"><van-uploader accept"image/*,.pdf" :before-read"(file) > beforeRead(file, -1)">…

Linux基本指令(3)

目录 时间相关的指令&#xff1a; 1.在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加好后接数个标记&#xff0c;其中常用的标记列表如下&#xff1a; 2.在设定时间方面&#xff1a; 3.时间戳&#xff1a; Cal指令&#xff1a; find指令&a…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图&#xff1a;这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

解析vue.config.js文件

一、用途 创建 Vue 项目时&#xff0c;默认情况下是没有 vue.config.js 文件的。Vue CLI 会提供一组默认的配置&#xff0c;用于构建和开发项目&#xff0c;这些配置在内部被封装好了&#xff0c;并不需要用户手动创建 vue.config.js 文件来进行配置。通过在项目根目录下创建 …

Stable Diffusion 常用放大算法详解

常用放大算法 图像放大算法大致有两种: 传统图像放大算法(Lantent、Lanczos、Nearest)AI图像放大算法(4x-UltraSharp、BSRGAN、ESRGAN等)传统图像放大算法是基于插值算法,计算出图像放大后新位置的像素值。AI图像放大算法,比一般的传统图像放大算法效果更好。 推荐放大…

数之寻软件怎么样?

数之寻软件是一款功能强大的数据恢复和备份软件&#xff0c;以下是对其特点和功能的详细评价&#xff1a; 一、数据恢复方面&#xff1a; 高效的数据恢复能力&#xff1a;数之寻软件采用了先进的算法和数据恢复技术&#xff0c;能够快速有效地恢复丢失或损坏的数据。无论是文…