用UICollectionView实现上下轮播的案例
//
// RecommendNewsCell.swift
// XMLYFM
//
// Created by Domo on 2018/8/2.
// Copyright © 2018年 知言网络. All rights reserved.
//
import UIKit
class RecommendNewsCell: UICollectionViewCell {
private var topBuzz:[TopBuzzModel]?
private lazy var imageView : UIImageView = {
let imageView = UIImageView()
imageView.image = UIImage(named: "news.png")
return imageView
}()
private var moreBtn:UIButton = {
let button = UIButton.init(type: UIButtonType.custom)
button.setTitle("| 更多", for: UIControlState.normal)
button.setTitleColor(UIColor.gray, for: UIControlState.normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 15)
return button
}()
private lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout.init()
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.itemSize = CGSize(width: (YYScreenWidth-150), height:40)
let collectionView = UICollectionView.init(frame:CGRect(x:80,y:5, width:YYScreenWidth-150, height:40), collectionViewLayout: layout)
layout.scrollDirection = UICollectionViewScrollDirection.vertical
collectionView.contentSize = CGSize(width: (YYScreenWidth-150), height: 40)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.white
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.isPagingEnabled = true
collectionView.isScrollEnabled = false
collectionView.register(NewsCell.self, forCellWithReuseIdentifier:"NewsCell")
return collectionView
}()
var timer: Timer?
override init(frame: CGRect) {
super.init(frame: frame)
setUpUI()
// 开启定时器
starTimer()
}
func setUpUI(){
self.addSubview(self.imageView)
self.imageView.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(10)
make.width.equalTo(60)
make.height.equalTo(30)
make.top.equalTo(10)
}
self.addSubview(self.moreBtn)
self.moreBtn.snp.makeConstraints { (make) in
make.right.equalToSuperview().offset(-5)
make.width.equalTo(60)
make.height.equalTo(40)
make.top.equalTo(5)
}
self.addSubview(self.collectionView)
}
var topBuzzList:[TopBuzzModel]? {
didSet{
guard let model = topBuzzList else { return }
self.topBuzz = model
self.collectionView.reloadData()
}
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
extension RecommendNewsCell : UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return (self.topBuzz?.count ?? 0)*100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell:NewsCell = collectionView.dequeueReusableCell(withReuseIdentifier: "NewsCell", for: indexPath) as! NewsCell
cell.titleLabel.text = self.topBuzzList?[indexPath.row%(self.topBuzz?.count)!].title
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(indexPath.row%(self.topBuzz?.count)!)
}
/// 开启定时器
func starTimer () {
let timer = Timer.init(timeInterval: 2, target: self, selector: #selector(nextPage), userInfo: nil, repeats: true)
// 这一句代码涉及到runloop 和 主线程的知识,则在界面上不能执行其他的UI操作
RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)
self.timer = timer
}
/// 在1秒后,自动跳转到下一页
@objc func nextPage() {
// 1.获取collectionView的X轴滚动的偏移量
let currentOffsetY = collectionView.contentOffset.y
let offsetY = currentOffsetY + collectionView.bounds.height
// 2.滚动该位置
collectionView.setContentOffset(CGPoint(x: 0, y: offsetY), animated: true)
}
/// 当collectionView开始拖动的时候,取消定时器
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer?.invalidate()
self.timer = nil
}
/// 当用户停止拖动的时候,开启定时器
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
starTimer()
}
}
class NewsCell: UICollectionViewCell {
lazy var titleLabel : UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 16)
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.titleLabel)
self.titleLabel.snp.makeConstraints { (make) in
make.left.right.height.top.equalToSuperview()
}
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
用UICollectionView实现上下轮播的案例的更多相关文章
- 用UICollectionView实现无限轮播图
用UICollectionView实现无限轮播图 效果 源码 https://github.com/YouXianMing/Animations 细节
- 无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- UICollectionView实现无限轮播
#import "KGNewsController.h"#import "KGNewsCell.h"#import "KGNews.h"#i ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS 移动端轮播图案例
body { margin:; } .hearder { width: 100%; height: 150px; position: relative; } ul { list-style: none ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- iOS-UICollectionView快速构造/拖拽重排/轮播实现
代码地址如下:http://www.demodashi.com/demo/11366.html 目录 UICollectionView的定义 UICollectionView快速构建GridView网 ...
随机推荐
- Vue-cli3与springboot项目整合打包
一.需求 使用前后端分离编写了个小程序,前端使用的是vue-cli3创建的项目,后端使用的是springboot创建的项目,部署的时候一起打包部署,本文对一些细节部分进行了说明. 二 ...
- vs2010编译C++ 状态标志
// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- emmmmmmmmmmmmmmmmmm01
当体会活着有多么难之后,就不要在那么随意的活着,今天有多么不在意自己的人生,明天就要加倍的被别的人左右自己的人生. 多思考,多学习,多总结,多创造.让自己成为有用的人,让自己未来有一天成为自己的主人.
- leetCode242 有效的字母异位词
引言: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram&qu ...
- UCENTER同步登录工作原理和配置要点
ucenter的同步登录原理: 1)Ucenter是和uc_client同步的.每个PHP应用,加入了UCENTER后,都会在主目录下有个UC_CLIENT目录.这个目录里,都有一个client.PH ...
- python面试总结知识点
1.python中is和==的区别 Python中对象包含的三个基本要素,分别是:id(身份标识) .type(数据类型)和value(值). ‘==’比较的是value值 ‘is’比较的是id 2. ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- DevOps - 生命周期
章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...
- QEMU 配置网络
背景 为了 实现 uboot 中连接上 QEMU-host 的网络. 非常奇怪,本人的 系统中 存在/dev/net/tun驱动,但是 lsmod | grep tun 却没有任何结果,所以实际上,这 ...
- 讨论(xia che ≖‿≖✧)magic number——1000000007
为什么要对1000000007取模(取余) 来看这篇博客的基本上都是和我一样脑子有坑的人,要么就是看了我某篇大数阶乘,大数的排列组合等类似博客被忽悠过来的.我刚刚说到那些类型的题目一般都要求将输出结果 ...