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

实现动画效果如下:

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

(0)

相关推荐

  • 微信小程序在ios下Echarts图表不能滑动的问题解决

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能. 所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了. 为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在e

  • iOS使用pageViewController实现多视图滑动切换

    本文实例为大家分享了pageViewController实现多视图(控制器)滑动切换的具体代码,供大家参考,具体内容如下 先看一下效果动画 类似的界面做过不少,在几个APP中都有用到过,再次之前不了解uipageViewController 曾经的思路有两个现在想想都觉得繁琐. 之前的思路1:使用嵌套,collectionview嵌套,每个item中添加内容 之前的思路2:使用scrollview 在上面创建一个一个的controller 实现左右滑动 这两个思路无疑是可以实现的,并且可以实现每

  • IOS开发中禁止NavigationController的向右滑动返回

    IOS开发中禁止NavigationController的向右滑动返回 大家在进行开法的时候细心的朋友会发现,.用后在屏幕的最左边,向右滑动,,你会发现,你的App返回到了上一个页面,这是怎么回事呢, 在你的App中输入UINavigationController ,然后按住commend键,点击鼠标,跳进去,如下图: 在UINavigationController 的属性中你会发现 红色下划线部分,你看到了UINavigationController 自带的有一个panGeesture,所以,

  • iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例

    一.好多App都有上下滑动UIScrollview隐藏或者显示导航栏,在这里我说说我觉得有用的几种方法: 1.iOS8之后系统有一个属性hidesBarsOnSwipe Objective-C代码如下 self.navigationController.hidesBarsOnSwipe = YES; swift代码如下 self.navigationController?.hidesBarsOnSwipe = true 当使用以上代码时,可以达到效果 2.使用UIScrollViewDelega

  • ios scrollview嵌套tableview同向滑动的示例

    我讨论的问题是嵌套同向滑动,能避免尽量避免.最好用一个tableview实现.一个tableview不够用了再嵌套,适用复杂场景. 首先我说下不适用的,免得大家浪费时间. 1.不适用上下拉刷新加载更多的页面. 2.不适用点击cell获取点击事件的页面,可以加入button点击获取事件. 官方文档说尽量不要进行两个竖直或两个水平方向滑动的视图嵌套.因为这个时候机器不知道用户要让哪个滑动,但在我们这个神奇的国度,项目中经常出现这样的需求,产品经理总爱这样做,andriod那边是比较容易实现的,ios

  • iOS 页面滑动与标题切换颜色渐变的联动效果实例

    话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心代码 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了 frame就可以直接设置子控件的位置和尺寸 isScrollEnable:是否可以滚动.某些地方该控件是可以滚动的. titles:显示的所有标题 // MARK:- 构造函数 init(frame: CGRect, isScrollEnable : Bool, titles

  • IOS仿今日头条滑动导航栏

    之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG

  • iOS滑动解锁、滑动获取验证码效果的实现代码

    最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • 详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    两种抖动 为什么抖动还会有两种? 其实是我碰到过两种抖动的场景,第一个场景是native的抖动,第二个场景是h5的抖动. native的抖动 前端开发人员会在app中打开webview,这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动,整个viewport跟着动,所以可以在生成schema的时候将参数bounce_disable(可能不一定都有这个参数,就看有没有类似的参数进行控制)设置为1禁止native的弹性效果,然后加上h5的这个效果,-webk

随机推荐