美文网首页APP 的编程学习
17.无限轮播之定时器

17.无限轮播之定时器

作者: whong736 | 来源:发表于2017-09-03 15:08 被阅读20次

1.实现左右无限滚动

设置图片滚动的个数从原来的固定6个改为10000,一般用户会划完一万次

//MARK:遵循collectionView的数据源协议

extension RecommenCycleView: UICollectionViewDataSource{
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return (cycleModels?.count ?? 0) * 10000
        
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kCycleCellID, for: indexPath) as! CollectionCycleCell
        
        cell.cycleModel = cycleModels![indexPath.item % cycleModels!.count]
        
        return cell
    }
}

image.png
//MARK: 遵循collection 代理协议
extension RecommenCycleView : UICollectionViewDelegate{
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        
        //1.滚动的偏移量,加上 0.5 让滚动到一半后自动加载到另一半。即默认帮他先多加载50%
        let offsetX = scrollView.contentOffset.x + scrollView.bounds.width * 0.5
        
        //2.计算pageController的currentIndex
        pageControl.currentPage = Int(offsetX / scrollView.bounds.width) %  (cycleModels?.count ?? 1)

    }
}

image.png

这样设置后,可以一直右边滚动了

设置向左滚动:做法是设置滚动的开始页面为数据。

    //定义模型属性
    var cycleModels : [CycleModel]?{
    
        //监听属性控件值的改变
        didSet{
            //1.刷新collectionView数据
            collectionView.reloadData()
            
            //2.设置pageControl的个数
            pageControl.numberOfPages = cycleModels?.count ?? 0
            
            //3.默认滚动到中间一个位置

           let indexPath = NSIndexPath(item: (cycleModels?.count ?? 0), section: 0)
            collectionView.scrollToItem(at: indexPath as IndexPath, at: .left, animated: false)
        }
    
    }
image.png image.png

2.定时器进行定时滚动

定义一个timer

    //定义一个定时器,可选类型
    var cycleTimer : Timer?
image.png

编写定时器的方法:

//MARK: 定义式的操作方法
extension RecommenCycleView{
    //添加定时器
    fileprivate func addCycleTimer(){
        
        // 设置定时器的基本配置
        cycleTimer = Timer(timeInterval: 3.0, target: self, selector: #selector(self.scrollToNext) , userInfo: nil, repeats: true)
        //加入到主线程中
        RunLoop.main.add(cycleTimer!, forMode: RunLoopMode.commonModes)

    }
    
 
    //移除定时器
    fileprivate func removeCycleTime(){
        
        //从运行循环中移除
        cycleTimer?.invalidate()
        cycleTimer = nil
    }
    
    //移动到下一个方法
    @objc fileprivate func scrollToNext(){
        
        //1.获取当前的偏移量
        let currentOffsetX = collectionView.contentOffset.x
        let offsetX = currentOffsetX + collectionView.bounds.width
        
        //2.滚动到该位置
        collectionView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)

    }
    
}

image.png

添加定时器和移除定时器

image.png

对用户拖拽进行特殊处理:

如果是拖拽,移除定时器
如果拖拽完成,添加定时器

image.png

最终效果:

image.png

马哥26

相关文章

  • 17.无限轮播之定时器

    1.实现左右无限滚动 设置图片滚动的个数从原来的固定6个改为10000,一般用户会划完一万次 这样设置后,可以一直...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • iOS ScrollView 的重用

    支持的功能: 无限轮播 定时器轮播 重用 原理:利用3(0 1 2)个视图不断的切换,滑动结束的时候始终让1显示在...

  • 轮播

    轮播: UIScrollview轮播UICollectionView轮播 实现步骤: (1)添加并设置定时器(2)...

  • 轮播图笔记

    轮播图课程学完目标: 1.dom操作 2.定时器 3.事件 4.js动画 4.函数递归 5.无限滚动大法(不会轮播...

  • 29、[ iOS ] 定时器和UIScrollView的拖动事件

    1、当界面同时存在有定时器和UIScrollView时,比如:一个界面顶部是一个由定时器控制的无限轮播图,下面是一...

  • 无限轮播专题系列之UICollectionView篇

    无限轮播专题系列之UICollectionView篇 开题概述 之所以将无限轮播作为专题来讲是因为使用的太广泛,几...

  • 轮播图心得

    一、轮播图 1.传统轮播图: 运动的封装:(1)定时器的使用,创建定时器setInterval();每隔指定的时间...

  • swift3.0版----使用一个UIImageView实现轮播

    使用一个UIImageView实现无限轮播功能比如:1.使用GCD定时器来解决NSTimer使用过程中的坑GCD定...

  • 仿造天猫、京东、凡客等,轮播图的开发(jQuery)

    轮播图思路:1、轮播图布局2、定时器实现轮播效果3、指示器的鼠标移入(mouseenter)、移出(mousele...

网友评论

    本文标题:17.无限轮播之定时器

    本文链接:https://www.haomeiwen.com/subject/prpdjxtx.html