PageControl(弹性滚动)

使用网上源码KYAnimatedPageControl

self.pageControl = [[KYAnimatedPageControl alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.bounds)/2-50, CGRectGetHeight(self.view.bounds) - 100, 100, 50)];
    self.pageControl.pageCount = 4;//数量
    self.pageControl.unSelectedColor = [UIColor colorWithWhite:0.9 alpha:1];//未滑动的颜色
    self.pageControl.selectedColor = [UIColor redColor];//滑动的颜色
    self.pageControl.bindScrollView = _scrollView; //需要绑定
    self.pageControl.shouldShowProgressLine = YES;//填充,小球之前的线条变色
    self.pageControl.indicatorStyle = IndicatorStyleGooeyCircle;//样式
    self.pageControl.indicatorSize = 15; //圆圈大小
    self.pageControl.swipeEnable = YES;//这有啥用
    [self.pageControl display];//设置完所有参数调用
    
    [self.view addSubview:self.pageControl];
    
    self.pageControl.didSelectIndexBlock = ^(NSInteger index){
        NSLog(@"Did Selected index : %ld",(long)index);
    };

UIScrollViewDelegate:

#pragma mark - <UIScrollViewDelegate>

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //Indicator动画
    [self.pageControl.indicator animateIndicatorWithScrollView:scrollView andIndicator:self.pageControl];
    
    if (scrollView.dragging || scrollView.isDecelerating || scrollView.tracking) {
        //背景线条动画
        [self.pageControl.pageControlLine animateSelectedLineWithScrollView:scrollView];
    }
    
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    self.pageControl.indicator.lastContentOffset = scrollView.contentOffset.x;
    
}

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    
    
    [self.pageControl.indicator restoreAnimation:@(1.0/self.pageControl.pageCount)];
    
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    self.pageControl.indicator.lastContentOffset = scrollView.contentOffset.x;
}

demo下载地址:http://pan.baidu.com/s/1pJn66pX

效果图:

时间: 2024-08-08 04:15:18

PageControl(弹性滚动)的相关文章

移动web页面支持弹性滚动的3个方案

有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android

背景弹性滚动的导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>背景弹性滚动的导航效果</title>

阻止IOS上的弹性滚动

1.添加判断标识 2.添加事件监听 addEventListener var flag = false; // 判断标识 document.elementName.addEventListener("touchmove", function(e){ if(flag){ e.preventDefault(); e.stopPropagation(); } },false); 注:如需移除事件监听,应按以下写法 function fn () {} document.elementName.

flex上下固定中间滚动布局

传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android2.2 以下不支持 position:fixed ios 和 android

webkit内核浏览器 手机端 滚动顿卡 处理方法 修改

今天遇到一个问题.因为之前也遇到过,解决了,但是一下子想不起来如何解决 所以,今天就把这个记录一下. 问题是这样: body下的一个容器 section 高度为100%  宽度为100% 即该 父类是和屏幕同宽同高的.但是 section 下的 子标签的 高度超过父标签 此时在手机端的滚动  有可能会滚动顿卡.这其实因为设备是没有启用弹性滚动,或者不支持弹性滚动. 测试一下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <h

Mobile的HTML5网页内快速滚动和回弹的效果

style="overflow: auto;-webkit-overflow-scrolling: touch; 这个可以让页面在Native端滚动时模拟原生的弹性滚动效果 下面是微信浏览器禁止页面下拉查看网址(不影响页面内部scroll) var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHe

【转】移动Web开发-点击事件及页面滚动

点击事件 移动端浏览器点击事件默认有300ms的延迟 移动端实现弹性滚动 安卓局部滚动 滚动条出现bug,解决方案:Android只是用全局滚动 模拟全局滚动,加上padding-top及padding-bottom 键盘定制 自动纠错关闭

移动端弹性效果

布局一: 定义页面整体高度为100%,然后使用 position:absolute 布局可解决 <body> <div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class="footer">footer</di

ScrollerLayout——可横向滚动的自定义viewgroup

具体功能看效果图: 小贴士---如何录屏 使用手机自带的录屏软件,录制后为mp4格式,然后再使用下面这个网址介绍的方法,转为gif(我是用的是在线转的那个,挺好用) Android手机如何录制屏幕及转GIF 这个自定义控件涉及到的知识点: 自定义ViewGroup中onMeasure和onLayout的写法 弹性滚动Scroller的用法 速度轨迹追踪器VelocityTracker的用法 如何处理滑动事件冲突 dispatchTouchEvent:(外部拦截)告诉此ScrollLayout的父