放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者在愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中 放屁。...直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离和速度不同,放屁的声音也不同...使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件: // 在文档中滚动 400 像素就放屁 $(document...).fartscroll(); // 文档中每滚动 800 像素就放屁 $(document).fartscroll(800); // 网页中没滚动 100 像素就放屁 $("body").fartscroll...(100); // 很多很多的屁 $("body").fartscroll(5); 仅供娱乐和恶搞哈,相信应该没有太多人喜欢在访问你网页的时候,听到你网页在放屁哈哈。
组件使用 ▐ 4.1 基本使用方式 创建一个控制器继承自GFPageViewController,创建完之后给控制器设置需要添加的子控制器(Array)、标题(Array)、副标题(Array): #...* 标题文字高度 */ @property (nonatomic, assign) CGFloat titleTextHeight; /** 副标题未选中时的颜色 */ @property (nonatomic...组件讲解 ▐ 5.1 菜单视觉差实现 效果: 开始看淘宝里面的淘抢购页面时,发现了一个细节,如下: ?...实现: 知道了原理,那就开始构思: 1、我的实现思路是用UICollectionView来实现滚动菜单; 2、需要两个UICollectionView,UICollectionViewCell的文字内容一样...这样使用起来就很方便,直接创建一个控制器继承GFPageViewController,再给他设置需要添加的子控制器、标题和副标题就 OK 了。
WaterfallFlowDemo - 一个简单的UICollectionView瀑布流布局演示demo。 XLForm - 很多表格类的table,写法更高冷一点,推荐使用。...HorizontalScrollCell - HorizontalScrollCell是一款使用方便的水平方向可滚动的单元格,适用于UICollectionView中实现水片方向滚动视图。 。...跳转指定页面。...通过长按选定单元格然后滚动移动到指定位置。 uicollectionview-reordering - UICollectionViews的拖拽(拖动、移动)效果,实例教程....TYPagerController - 简单,支持定制,页面控制器,可以滚动内容和标题栏,包含多种style。
MVVM 好了,回到正题,在项目中我们使用了 MVVM 模式,在上一篇文章中,我们讲完了 Model 和 ViewModel, 那接下来就开始讲第三部分 View 吧!...具体实现该效果的代码在这里我就不做多阐述了,因为在我之前的文章中,我已经将实现这个效果的教程写出来了,查看此文即可:使用 UICollectionView 实现首页卡片轮播效果 圆形菜单入口 该效果实现起来很简单...我们知道在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于它自身 frame 的宽度;当不设置这个分页属性,它的默认值是...停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标 定义俩个值分别为 UICollectionView...,我已经将实现这个效果的教程写出来了,查看此文即可:使用 UICollectionView 实现分页滑动效果 音乐日历 UI 如图: image 音乐日历的效果,不需要支持横向滚动,所以这里可以选择在
推荐预售和限时限量的商品 可以横向滚动 出现 ViewMore 跳转到对应频道的页面 切换频道可以切换对应栏目的内容 如果两者都没有数据隐藏 第四部分 ?...开始觉得很简单,毕竟我也是对于 UITableView和 UICollectionView 很溜的码农。 之前界面框架很简单 ?...整体是一个 UICollectionView 上面是一个 Header 我现在使用原来框架面临的问题是 我的 Header 那么多元素 都超出两屏幕了 自然要滚动了 之前是商品列表和 Header 可以显示在一个屏幕...因为下面的频道是横向滚动的 设置方向之后 UICollectionView 的 Header 就是在最左边 不是我们要的结果 ?...最后就做了判断 如果频道栏目没有在最上面 则强行设置下面滚动试图 ContentOffSet为{0,0} 把滑动的距离代理出去 让最外层的滚动试图做对应的滚动 ?
的滚动方向是横向的 随着 UICollectionView 滚动,Cell 会自动的进行缩放,当 Cell 的中心点与 UICollectionView 的中心点重合时放大,偏离中心点时缩小 Cell...第二步,要实现 Cell 随 UICollectionView 滚动时具有缩放效果,就需要找一个合适的时机对 Cell 进行缩放,我的思路是先计算出 UICollectionView 整体滚动内容的中心点的...同学你讲的没错,但是当我们 Cell 的 width 加上边距等如果不占满 UICollectionView,那么就会出现一个问题,虽然你实现了分页效果,但是你的 Cell 在滚动的过程中是不会居中的....读过我前几篇 UICollectionView 系列的小伙伴们,不知道你们还有没有印象,我写过一篇教程叫做 "使用 UICollectionView 实现分页滑动效果" 这里附上链接(使用 UICollectionView...停止滚动时,返回一个新的偏移点坐标,它有俩个参数,第一个参数 proposedContentOffset 指的是滚动将要停止时的偏移点坐标,第二个参数 velocity 指的是滚动速度;那既然我们能获取到当前滚动即将停止的坐标
HorizontalScrollCell - HorizontalScrollCell是一款使用方便的水平方向可滚动的单元格,适用于UICollectionView中实现水片方向滚动视图。...XLPlainFlowLayout - 可以让UICollectionView的标题也支持悬停效果,类似于tableView的普通风格。...TYPagerController - 简单,支持定制,页面控制器,可以滚动内容和标题栏,包含多种风格。...MediumScrollFullScreen - Medium的可扩展滚动页面,上下滚动时,全屏显示内容,并自然消隐上下菜单。...HYBLoopScrollView - HYBLoopScrollView实现自动循环滚动,一般用于展示广告页。微信在贴纸宣传处就使用了轮播。
本文就介绍纯用代码创建UICollectionView的简单示例,效果如下图: 实现 如图所示,视图由一个个方块组成,每个方块中有一张图片以及一个标题文字。...为了显得真实一点,我用了一个随机数来决定每个cell显示的图片和文字,这样在呈现的时候就不会太过千篇一律。...不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的,默认是流水布局,也就是我们最常见的形式,也就是上面图里的形式;此外,UICollectionView除了垂直滚动,...代码中注释了一行,就是用来设置滚动方向为水平的,效果如下: 同样的内容,滚动方式变化后,呈现的效果也会变化。...的使用方式,就像UITableView可以简单也可以做的非常多样,UICollectionView也是一种乍看很平常但可以容纳非常多想象力的布局方式,只要善加利用就可以做出很好的效果,当然,什么时候用UICollectionView
前面两篇文章聊的UITableView和UICollectionView都是继承自UIScrollView,本篇文章就来简单聊聊UIScrollView。 ?...frame是视图在屏幕中展示的位置和大小,也就是可视区域的位置和大小。 contentSize是scrollView视图的内部内容可以滚动的区域大小,也就是scrollView视图内容的实际大小。...*)scrollView { // NSLog(@"%f, %f", scrollView.contentOffset.x, scrollView.contentOffset.y); } //开始拖拽...上图是我在知乎首页的一个截图。 首先,整个从上而下它是一个tableView+collectionView。...(内容列表是tableView,“关注、推荐、热榜”标题栏是一个collectionView) 然后,“关注、推荐、热榜”每一个标题栏都对应一个tableView,一共有3个tableView,这三个tableView
使用UICollectionView必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout...的精髓 Layout决定了UICollectionView是如何显示在界面上的。...// 垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用, @property (nonatomic) CGSize headerReferenceSize; @property (nonatomic...如果YES则在边界变化(一般是scroll到其他地方)时,将重新计算需要的布局信息。...首先,-(void)prepareLayout将被调用, 默认下该方法什么没做,但是在自己的子类实现中 ,一般在该方法中设定一些必要的layout的结构和初始需要的参数等。
UICollectionView 是 iOS6 之后引入的一个新的 UI 控件,与 UITableView 有着很多相似的地方,在开发过程中我们都会选择使用它们俩来为 App 的整个页面进行布局,比如说淘宝的首页...如何使用 UICollectionView 实现网易云首页卡片轮播效果。...JUST DO IT 想到滚动,大家首先想到的肯定是用 UIScrollView + UIImageView 的方式来实现,但是 UICollectionView 给我们提供了更好的选择,因为它本身继承自...UIScrollView 然后又支持横向滚动,所以使用 UICollectionView 来实现横向滚动效果是最好不过的。...app 中使用,并且达到很好的用户体验还是有很大的优化空间的。
在上篇博客中,给大家演示了如何利用 UICollectionView 这个强大的控件去实现一个卡片轮播的效果,后来有网友联系我说:"他遇到一个问题,当他滚动的 item 宽度与屏幕宽度一致时,滚动效果是正常的...这个问题确实是存在的,因为在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于屏幕的宽度;当不设置这个分页属性,...有人要问那是不是 UICollectionView 这个控件就只能按照屏幕的大小来分页呢!答案当然是否定的。 那自定义滚动分页该如何实现呢!...停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 1.定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标2.定义俩个值分别为 UICollectionView...停止滚动时的偏移量 Talk is cheap, show me the code, 代码实现如下: class RowStyleLayout: UICollectionViewFlowLayout
文字换行 使用 storyboard:设置Lines为 0,然后在Text中用option+回车换行。 使用代码:label.numberOfLines = 0,设置文字的时候用\n换行。...文字换行 使用 storyboard:设置 Lines Break 为Word Wrap,然后在 title 中用option+回车换行。...使用类似 UITextField。 内容可滚动。...数据联动 在某一列滚动的时候,重新设置联动列的显示数据,然后进行刷新操作。...UITableViewDiffableDataSource 在 iOS 13 中引入了新的 API — Diffable Data Source,它不仅能够驱动 UITableView 和 UICollectionView
但值得注意的时,在UICollectionView中,不仅cell可以重用,Supplementary View和Decoration View也是可以并且应当被重用的。...向数据源请求数据之前使用-registerNib:forCellReuseIdentifier:方法为@“MY_CELL_ID”注册过nib的话,就可以省下每次判断并初始化cell的代码,要是在重用队列里没有可用的...这个特性很受欢迎,因此在UICollectionView中Apple继承使用了这个特性,并且把其进行了一些扩展。...需要注意根据滚动方向不同,header和footer的高和宽中只有一个会起作用。垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用,如图。 .../17204693 UICollectionView的使用方法及demo http://www.tuicool.com/articles/QJjeqy iOS开发-UICollectionView详解+
并且移动时,如果要显示的图片不在屏幕中央就做一个位置矫正。点击图片时,使用仿射变换使其放大,再点击使其缩小。接下来将会详细的介绍其实现方案。 ?...所以在本篇博客的第二部分,将要介绍如何去使用该自定义组件。...下方是使用Storyboard来指定的布局文件,需要把Layout选项调到Custom下,然后下方的Class选项就是你要关联的自定义布局文件,具体如下所示。代码的就在此不做赘述了,网上一抓一大把。...预加载布局方法, 该方法会在UICollectionView加载数据时执行一次,在该方法中负责调用一些初始化函数。具体如下所示。...其中transform的值是根据CollectionView的滚动偏移量来计算的,所以在滚动CollectionView时,Cell也会跟着旋转。
它非常易于使用-只需下载 TKSwitcherCollection 并将其拖放到项目中,就可以了! 目前,有四种不同的开关可用: • TKSimpleSwitch:可在 iOS 上使用的传统开关。...AnimatedCollectionViewLayout 在项目之间滚动时,UICollectionView没有默认的过渡效果动画。...要使用它,您需要将库导入到您的项目中。然后,您必须创建一个 AnimatedCollectionViewLayout 对象,设置其动画设计器,并将其分配给您的 UICollectionView。...CollectionViewSlantedLayout CollectionViewSlantedLayout 是 UICollectionViewLayout 的另一个子类,它允许在 UICollectionView...该库可用于每个 UICollectionView,水平和垂直具有动态单元格高度。 在可配置的项目中,可以配置倾斜大小,倾斜方向,倾斜角度,滚动方向,行距,项目大小以及排除第一个或最后一个单元倾斜。
iOS流布局UICollectionView系列六——将布局从平面应用到空间 一、引言 前面,我们将布局由线性的瀑布流布局扩展到了圆环布局,这使我们使用UICollectionView的布局思路大大迈进了一步...iOS系统的控件中,也并非没有这样的先例,UIPickerView就是很好的一个实例,这篇博客,我们就通过使用UICollectionView实现一个类似系统的UIPickerView的布局视图,来体会...UICollectionView在3D控件布局的魅力。...而我们这次要讨论的布局则不同,pickerView会随着我们手指的拖动而进行滚动,因此UICollectionView中的每一个item的布局是在不断变化的,所以这次,我们采用动态配置的方式,在layoutAttributesForItemAtIndexPath...,滚轮就是出现在最后一个item的位置,而不是第一个,并且有些相关的地方,我们也需要一些适配: 在viewController中: //一开始将collectionView的偏移量设置为1屏的偏移量 collect.contentOffset
问题反馈 线上突发一个Top1的crash告警,场景是UICollectionView在删除的时候触发。...通过上述信息和用户行为日志,可以猜测UICollectionView是在界面跳转之后触发删除动画导致crash。...=> UICollectionView开始删除动画 => 出现crash。...有一个逻辑是会把最近使用的cell排在最前面,于是从UICollectionView点击cell发生界面跳转后会触发UICollectionView刷新并调reloadData。...这是UICollectionView内部对动画前后的数量校验,iOS 12及以下的系统会有NSAssert的断言触发;iOS 13开始没有NSAssert,但是同样会有异常Log。
横屏时,导航栏自动消失 self.navigationController.hidesBarsWhenVerticallyCompact = YES; ? 1.gif 2....单击屏幕时,导航栏自动消失 self.navigationController.hidesBarsOnTap = YES; ? 2.gif 3....滑动屏幕时,导航栏自动消失 self.navigationController.hidesBarsOnSwipe = YES; ?...4.gif 经测试,这个属性适用于WebView、UITableView、UICollectionView,但是注意: 导航条隐藏时会出现大黑条遮住状态栏,且导航条不会自动再显示出来; 当多个可滚动的控件同时出现的时候...,离导航栏最近的那个视图滚动时会响应,其余滚动的时候不响应。
这个控件的核心技术点汇总齐全,毕竟 UICollectionView 使用的范围太广泛了。...答案当然是肯定的,在 UICollectionView 控件中我们管这叫 Supplementary View, 翻译过来就是 "追加视图",那在 UICollectionView 中该怎么实现给每个...滚动的时候,只要当前 section 的 headerView 向上滚动到最顶部的时候,它就会与屏幕顶部粘住不会隐藏,具体效果如下: 这效果第一眼看上去是不是感觉有点复杂,这效果起码得撸个百来行代码才能实现这效果啊...拖拽调整顺序 在我们开始之前先看下效果图: 这效果还不错吧!...但当我真正的去整理它的一些技术点时,我发现它实在是太灵活了,以前觉得追加视图,装饰视图这些东西很简单,几行代码的事情,但事实上,当你想要去实现一些高度自定义的界面的时候,你才会认识到自己的不足,你并没有对这些知识有更深层次的认知
领取专属 10元无门槛券
手把手带您无忧上云