个人中心
gpt4 book ai didi

android - 内容被 Ionic 中的标题和标签隐藏

转载 作者：太空狗 更新时间：2023-10-29 16:00:58 27 4
gpt4 key购买 nike

我有一个包含 3 个选项卡的索引页。该问题出现在所有选项卡中，但我将在此处显示主页。出现的问题是主页顶部的一些内容被标题栏和标签栏重叠，因此被隐藏了。

在主页 html 页面内，我尝试用 ion-content 包裹代码(请参阅下面的代码)，但这会隐藏顶部内容，压缩高度并且不再是全屏，加上幻灯片我必须在内容上滑动，因为如果我触摸一些填充或边距空间，它不会再滑动(幻灯片 3 是一个很好的例子，因为它没有很多内容，你必须按下并滑动在文本上滑动)。如果我删除 ion-content 标签，这会正确调整高度，使滑动工作，所以我不必在内容上滑动就可以工作，但顶部内容被选项卡和标题栏重叠的问题仍然存在存在。我怎样才能将 home.html 完美地放在选项卡下并利用所有空间？

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- ngCordova install script needed -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="mobileApp">


  <script id="tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab icon="ion-home-outline"  ui-sref="tabs.Home">
        <ion-nav-view name="Home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab icon="ion-info-outline" ui-sref="tabs.Info">
        <ion-nav-view name="Info-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab icon="ion-system-outline" ui-sref="tabs.System">
        <ion-nav-view name="System-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-calm">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view>
    <ion-view  hide-back-button="true">
      <ion-nav-title>
        <h1>TitleHere</h1>
      </ion-nav-title>
    </ion-view>
  </ion-nav-view>

  </body>
</html>

home.html

<ion-content>
        <div class="item item-checkbox">
            Checkbox Label
            <label class="checkbox">
                <input type="checkbox">
            </label>
        </div>

        <ion-slide-box>
            <ion-slide>
                <h3>Thank you for choosing the Awesome App!</h3>
                <div id="logo">
                    <img src="http://code.ionicframework.com/assets/img/app_icon.png">
                </div>
                <p>
                    We've worked super hard to make you happy.
                </p>
                <p>
                    But if you are angry, too bad.
                </p>
            </ion-slide>
            <ion-slide>
                <h3>Using Awesome</h3>

                <div id="list">
                    <h5>Just three steps:</h5>
                    <ol>
                        <li>Be awesome</li>
                        <li>Stay awesome</li>
                        <li>There is no step 3</li>
                    </ol>
                </div>
            </ion-slide>
            <ion-slide>
                <h3>Any questions?</h3>
                <p>
                    Too bad!
                </p>
            </ion-slide>
        </ion-slide-box>

 <div class="bar bar-footer bar-balanced" >
   <div class="title">Footer</div>
 </div>
</ion-content>

具有 ion-content 。顶部的复选框是隐藏的，页脚不在底部，只有当我按住并在内容上滑动而不是在空白区域上滑动时，滑动才有效。 With ion-content. The top checkbox is hidden, the footer is not on the bottom and swiping only works if I hold and swipe over content not over white space.

如果我去除 ion-content 。页脚到底部，我可以在白色的任何地方滑动，它会滑动，但复选框仍然被标题栏和选项卡隐藏。 If I remove ion-content. The footer goes to the bottom, I can swipe anywhere in the white and it will swipe, but the checkbox is still hidden by the title bar and the tabs.

最佳答案

我之前第一次尝试Ionic的时候遇到过这个问题。浪费了很多时间来解决这个问题。您的某些顶部内容将被重叠，因为 ion-tabs 优先级高于后面的内容。

我把页脚放在 <ion-content> 外面标签。我放置了一些类，例如 has-tabs-top和 has-footer .

试试这个，让我知道它是否可以帮助你。 http://codepen.io/nampdn/pen/qOKNNv

HTML

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>


  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
        <ion-nav-view name="about-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
        <ion-nav-view name="contact-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-content class="has-tabs-top has-footer" scroll="false">
        <div class="item item-checkbox">
          Checkbox Label
          <label class="checkbox">
            <input type="checkbox">
          </label>
        </div>
        <ion-slide-box>
          <ion-slide>
            <h3>Thank you for choosing the Awesome App!</h3>
            <div id="logo">
              <img src="http://code.ionicframework.com/assets/img/app_icon.png">
            </div>
            <p>
              We've worked super hard to make you happy.
            </p>
            <p>
              But if you are angry, too bad.
            </p>
          </ion-slide>
          <ion-slide>
            <h3>Using Awesome</h3>

            <div id="list">
              <h5>Just three steps:</h5>
              <ol>
                <li>Be awesome</li>
                <li>Stay awesome</li>
                <li>There is no step 3</li>
              </ol>
            </div>
          </ion-slide>
          <ion-slide>
            <h3>Any questions?</h3>
            <p>
              Too bad!
            </p>
          </ion-slide>
        </ion-slide-box>


      </ion-content>
      <div class="bar bar-footer bar-balanced">
        <div class="title">Footer</div>
      </div>
    </ion-view>
  </script>

  <script id="templates/facts.html" type="text/ng-template">
    <ion-view view-title="Facts">
      <ion-content class="padding">
        <p>Banging your head against a wall uses 150 calories an hour.</p>
        <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
        <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
        <p>A cockroach will live nine days without it's head, before it starves to death.</p>
        <p>Polar bears are left handed.</p>
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/facts2.html" type="text/ng-template">
    <ion-view view-title="Also Factual">
      <ion-content class="padding">
        <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
        <p>1 in every 4 Americans has appeared on T.V.</p>
        <p>11% of the world is left-handed.</p>
        <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
        <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
        <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/about.html" type="text/ng-template">
    <ion-view view-title="About">
      <ion-content class="padding">
        <h3>Create hybrid mobile apps with the web technologies you love.</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/nav-stack.html" type="text/ng-template">
    <ion-view view-title="Tab Nav Stack">
      <ion-content class="padding">
        <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/contact.html" type="text/ng-template">
    <ion-view title="Contact">
      <ion-content>
        <div class="list">
          <div class="item">
            @IonicFramework
          </div>
          <div class="item">
            @DriftyTeam
          </div>
        </div>
      </ion-content>
    </ion-view>
  </script>

</body>

</html>

关于android - 内容被 Ionic 中的标题和标签隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33361585/

27 4 0
文章推荐： c - 在单个 Pthread 中打印
文章推荐： C BitWise - "1 << (num - 1)"和 "|="有什么作用？
文章推荐： c - 从 uint8_t 类型数组中提取位
文章推荐： c - C中文本查找的通用枚举
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com