PhoneGap中文网

 找回密码
 立即注册
查看: 15257|回复: 2

关于page中header和content的问题

[复制链接]

1

主题

2

帖子

15

积分

新手上路

Rank: 1

积分
15
发表于 2015-3-4 10:41:46 | 显示全部楼层 |阅读模式
我在index页面中的header标签中加入data-position="fixed"后首次刷新页面后,content中的内容会从屏幕顶端开始,导致被header中的内容覆盖;切换到其他Page后再回到index页面中,content中的内容又正常了从header后面开始显示,求大神指导如何才能让content始终从header后面开始显示并且header始终保持固定啊?非常感谢

代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>KmcfApp</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            -->
<link href="jqueryMobile/jquery.mobile-1.3.2.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/slick/slick.css">
<link rel="stylesheet" href="css/slick/slick-theme.css">
<script>
    window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.2.js"></script>
<script src="js/slick/slick.js"></script>
</head>
<body style="display: none;">
    <div data-role="page" id="index">
        <script src="js/index.js"></script>
        <div data-role="header" data-tap-toggle="false"
            data-position="fixed" data-theme="d">
            <div class="logoBg">
                <img class="logo" src="./images/logo.png" />
            </div>
        </div>
        <div data-role="content">
            <div class="imagesSlide">
                <div>
                    <img src="./images/slide/img1.png">
                </div>
                <div>
                    <img src="./images/slide/img2.png">
                </div>
                <div>
                    <img src="./images/slide/img3.png">
                </div>
            </div>
            <div class="gridMenu ui-grid-b">
                <div class="menuBlock ui-block-a">
                    <img src="./images/myAttention.png"> <span>我的关注</span>
                </div>
                <div class="menuBlock ui-block-b">
                    <img src="./images/intelligentException.png"> <span>智能异常</span>
                </div>
                <div class="menuBlock ui-block-c">
                    <img src="./images/artiException.png"> <span>人工异常</span>
                </div>
                <div class="menuBlock ui-block-a">
                    <img src="./images/postManagement.png"> <span>工位管理</span>
                </div>
                <div class="menuBlock ui-block-b">
                    <img src="./images/conferenceManagement.png"> <span>会议管理</span>
                </div>
                <div class="menuBlock ui-block-c">
                    <img src="./images/dataAnalysis.png"> <span>综合分析</span>
                </div>
                <div class="menuBlock ui-block-a">
                    <img src="./images/lifeService.png"> <span>生活服务</span>
                </div>
                <div class="menuBlock ui-block-b">
                    <img class="addIcon" src="./images/addMore.png">
                </div>
            </div>
        </div>
        <div data-role="footer" data-position="fixed" data-id="indexNav"
            data-tap-toggle="false" data-theme="d">
            <div data-role="navbar">
                <ul>
                    <li><a href="" id="toMainPage" data-icon="custom"
                        class="ui-btn-active ui-state-persist">首页</a></li>
                    <li><a href="./pages/myMessage.html" id="toMyMessage"
                        data-icon="custom">消息</a></li>
                    <li><a href="./pages/myInformation.html" id="toMyInformation"
                        data-icon="custom">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>
it营
回复

使用道具 举报

0

主题

18

帖子

58

积分

注册会员

Rank: 2

积分
58
发表于 2015-5-26 15:02:35 | 显示全部楼层
未来属于html5 所以来学习phonegap开发
it营
回复 支持 反对

使用道具 举报

0

主题

18

帖子

58

积分

注册会员

Rank: 2

积分
58
发表于 2015-5-26 15:14:51 | 显示全部楼层
收下,学习学习!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-4-17 00:51 , Processed in 0.053059 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表