欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

iOS实现无限滑动效果,

来源: 开发者 投稿于  被查看 38993 次 评论:275

iOS实现无限滑动效果,


在看到这个标题的时候,相信大家心里肯定会想,无限循环轮播的博客已经满天飞了,好有必要写么。这里我想声明一下,这里的无线滑动,但是数据却不循环。

实现原理

由于业务的需求,需要有大量的数据呈现在collectionView上,但是又不想刷新全部的数据,因此需要制定collectionView的cell的数量为有限的。针对这一种情况,我们需要保证页面刷新数据源的索引和页面滑动的索引是不致的。同时滑动停止后,悄悄的将collectionView恢复到初始的位置。
具体源码如下:

@interface JKReadViewController ()<UIScrollViewDelegate>
{
    NSArray *_datas;
}
@property (nonatomic,assign)  NSInteger currentIndex;
@property (nonatomic,assign) NSInteger cellCount;
@property (nonatomic,assign) NSInteger sectionNum;
@end

@implementation JKReadViewController

- (UICollectionViewFlowLayout *)collectionViewLayout{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    return flowLayout;
}

- (Class)cellClass{
    return [JKPageCollectionCell class];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)configOrigin{
    self.sectionNum = floor(self.dataIndex/self.cellCount);
    self.currentIndex = 1;//当前CollectionView的索引

    NSIndexPath *idxPath = [NSIndexPath indexPathForItem:1 inSection:0];

    [self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:0 animated:NO];
}

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self configOrigin];
}

- (void)configUI{
    [super configUI];
    self.collectionView.pagingEnabled = YES;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    self.collectionView.bounces = NO;
}


-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    NSInteger index = scrollView.contentOffset.x/ scrollView.bounds.size.width;
    if (index>self.currentIndex) {
        self.dataIndex++;//数据源的索引
    }else if (index< self.currentIndex){
        self.dataIndex--;
        self.dataIndex = self.dataIndex<0?0:self.dataIndex;
    }
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
    [self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:0 animated:NO];

    });

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath {

    JKPageCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[JKPageCollectionCell CellIndentifier] forIndexPath:indexPath];
         NSString *title = self.datas[self.dataIndex];
        [cell updateViewWithModel:title];

    return cell;

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.cellCount;
}


- (NSArray *)datas{//模拟的大量的数据源
    if (!_datas) {
        NSMutableArray *tempArray = [NSMutableArray new];
        for (NSInteger i = 0; i< 1000; i++) {
            NSString *string = [NSString stringWithFormat:@"%@",@(i)];
            [tempArray addObject:string];
        }
        _datas = [tempArray copy];
    }
    return _datas;
}

- (NSInteger)cellCount{
    return 3;//单元格的数量
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

实现动画效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持3672js教程。

您可能感兴趣的文章:
  • IOS仿今日头条滑动导航栏
  • ios scrollview嵌套tableview同向滑动的示例
  • iOS使用pageViewController实现多视图滑动切换
  • iOS滑动解锁、滑动获取验证码效果的实现代码
  • 详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
  • 微信小程序在ios下Echarts图表不能滑动的问题解决
  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)
  • iOS 页面滑动与标题切换颜色渐变的联动效果实例
  • IOS开发中禁止NavigationController的向右滑动返回
  • iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例

用户评论