底下滚动,上边标题也会跟着滚动(仿环球时报)

选择第一个的效果图:

选择第二个的效果图:

项目目录:

注意本代码引入了第三方库SVSegmentedControl

RootViewController.h

#import <UIKit/UIKit.h>
#import "SVSegmentedControl.h"

@interface RootViewController : UIViewController
<UIScrollViewDelegate>
{
    UIScrollView *scrollView1;
    UIScrollView *scrollView2;
    UIPageControl *pag;
    NSMutableArray *dataArray;
    SVSegmentedControl *options;
}

@end

RootViewController.m

#pragma -mark -functions
-(void)initBackGroundView
{
    //隐藏导航条
    self.navigationController.navigationBarHidden=YES;

    //底部的滚动条
    scrollView1=[[UIScrollView alloc]init];
    scrollView1.frame=CGRectMake(0, 40, 320, 400);
    scrollView1.backgroundColor=[UIColor grayColor];
    scrollView1.delegate=self;
    scrollView1.pagingEnabled=YES;
    scrollView1.contentSize=CGSizeMake(320*2, 376);
    [self.view addSubview:scrollView1];

    //第一页的内容
    UIView *v1=[[UIView alloc]init];
    [v1 setFrame:CGRectMake(0, 0, 320, 376)];
    v1.backgroundColor=[UIColor redColor];
    [scrollView1 addSubview:v1];

    //第二页的内容
    UIView *v2=[[UIView alloc]init];
    v2.frame=CGRectMake(320, 0, 320, 376);
    v2.backgroundColor=[UIColor blueColor];
    [scrollView1 addSubview:v2];

    //下面指示页的圆点
    pag=[[UIPageControl alloc]initWithFrame:CGRectMake(160, 400, 0, 0)];
    pag.numberOfPages=2;
    pag.currentPage=0;
    [self.view addSubview:pag];

    //上面的滑动图标
    options = [[SVSegmentedControl alloc] initWithSectionTitles:[NSArray arrayWithObjects:@"购车应用",@"车主应用", nil]];
    [options addTarget:self action:@selector(actiBtClick:) forControlEvents:UIControlEventValueChanged];
    [options setBackgroundImage:[UIImage imageNamed:@"switchBg.png"]];
    options.center=CGPointMake(160, 50);
    options.crossFadeLabelsOnDrag=YES;
    options.selectedIndex=0;
    options.textColor=[UIColor blackColor];
    options.LKWidth=120;
    options.textShadowOffset=CGSizeMake(0, 0);
    options.textShadowColor=[UIColor clearColor];
    options.height=30;
    options.thumb.backgroundImage=[UIImage imageNamed:@"按钮-2.png"];
    options.thumb.highlightedBackgroundImage=[UIImage imageNamed:@"按钮-2.png"];
    options.thumb.textShadowColor=[UIColor clearColor];
    options.thumb.textShadowOffset=CGSizeMake(0, 0);
    [self.view addSubview:options];

}
#pragma -mark -doClickActions
- (void)actiBtClick:(SVSegmentedControl *)sender
{
    if(sender.selectedIndex==0)
    {
        [scrollView1 setContentOffset:CGPointMake(0, scrollView1.contentOffset.y) animated:YES];
        pag.currentPage=0;
    }
    else if(sender.selectedIndex==1)
    {
        [scrollView1 setContentOffset:CGPointMake(320, scrollView1.contentOffset.y) animated:YES];
        pag.currentPage=1;
    }
}
#pragma -mark -scrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if(scrollView1.contentOffset.x==0)
    {
        pag.currentPage=0;
        [options moveThumbToIndex:0 animate:YES];
    }
    else if(scrollView1.contentOffset.x==320)
    {
        pag.currentPage=1;
        [options moveThumbToIndex:1 animate:YES];
    }
}
时间: 2024-10-24 18:02:50

底下滚动,上边标题也会跟着滚动(仿环球时报)的相关文章

scroll02-滚动滚动栏,导航栏跟着变

滚动滚动栏,导航栏跟着变,点击导航栏,滚动到相应的位置 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="http://

关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题.下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题.下面主要分享一下解决办法以及关键代码. 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 .... 后来经过网友的帮助,结合我的代码终于找到了解决的办法 我的项目是用vu

iframe的滚动栏问题:显示/隐藏滚动栏

iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

神奇的滚动动画,30个视差滚动网站设计

使用 HTML5 和 CSS3,我们能够在浏览器中创建更有趣和更吸引眼球的效果.其中,视差滚动(Parallax Scrolling)就是这样的效果之一.这种技术通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果. 第一个视差滚动效果的网站是由伊恩·科伊尔在2011年设计的(叫“Nike Better World”,现在已经改版了).如今,视差滚动已经通过各种各样方式被大量使用,这是一个创建愉快的用户体验的伟大的方式. 在这个综合列表中,推荐了30个梦幻般的

jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * jQuery cxScroll 1.2.1 * http://code.ciaoca.com/ * https://github.com/ciaoca/cxScroll * E-mail: [email protected] * Released under the MIT license * Da

vue 横向滚动样式&amp;&amp;$ref.scrollLeft初始化数据滚动位置

一.先说一下横向滚动样式: <div class="everyone-wrap" ref="parent"> <div class="everyone-cont"> <dl v-for="(item, index) in shareData.top" :key="index"> <dt> <van-image :src="item.pic&qu

Android 设置ListView不可滚动 及在ScrollView中不可滚动的设置

http://m.blog.csdn.net/blog/yusewuhen/43706169 转载请注明出处: http://blog.csdn.net/androiddevelop/article/details/38815493 希望得到的效果是ListView不能滚动,但是最大的问题在与ListView Item还必有点击事件,如果不需要点击事件那就简单了,直接设置ListView.setEnable(false); 如果还需要点击事件,滚动与点击都是在ListView Touch处理机制

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高 document.body.clientHeight 2.有效的高,屏幕可视的高 document.documentElement.clientHeight 3.屏幕的总高度 document.documentElement.scrollHeight 4.滚动的高度 document.documentElement.scrollTop js代码 <script>// 获取有效的宽和高,屏幕可视的宽 高 var winX = document.documentE

div滚动底部加载li,window滚动底部加载li

DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> u