菜鸟教程小白 发表于 2022-12-13 10:55:55

android - Ionic ios 应用程序在标题下方显示黑条


                                            <p><p>我是 <code>ionic</code> 移动应用程序开发的新手。我正在开发一个移动应用程序，其中 <code>Android</code> 应用程序运行良好，但在 <code>IOS</code> 上它在标题下方显示黑条。</p>

<p><strong>IOS:</strong> </p>

<p> <a href="/image/haP9N.png" rel="noreferrer noopener nofollow"><img src="/image/haP9N.png" alt="with black bar"/></a> </p>

<p><strong>安卓:</strong></p>

<p> <a href="/image/gi0DK.png" rel="noreferrer noopener nofollow"><img src="/image/gi0DK.png" alt="Work Perfect"/></a> </p>

<p><strong>截图代码:</strong></p>

<pre><code>&lt;ion-content class=&#34;padding&#34;&gt;
&lt;div class=&#34;list&#34;&gt;

    &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.dashboard&#34;&gt; &lt;i
      class=&#34;icon fa fa-tachometer&#34;&gt;&lt;/i&gt; Dashboard
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; href=&#34;#&#34;&gt; &lt;i
      class=&#34;icon fa fa-lightbulb-o&#34;&gt;&lt;/i&gt; Opportunity
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.person&#34;&gt; &lt;i
      class=&#34;icon fa fa-user&#34;&gt;&lt;/i&gt; Person &lt;!--   &lt;span class=&#34;item-note&#34;&gt;
      Grammy
    &lt;/span&gt; --&gt;
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.scheduler&#34;&gt; &lt;i
      class=&#34;icon fa fa-calendar&#34;&gt;&lt;/i&gt; Calendar &lt;!-- &lt;span class=&#34;badge badge-assertive&#34;&gt;0&lt;/span&gt; --&gt;
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.product&#34;&gt; &lt;i
      class=&#34;icon fa fa-cube&#34;&gt;&lt;/i&gt; Products
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; href=&#34;#&#34;&gt; &lt;i
      class=&#34;icon fa fa-weixin&#34;&gt;&lt;/i&gt; Interactions
    &lt;/a&gt; &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.organization&#34;&gt; &lt;i
      class=&#34;icon fa fa-building-o&#34;&gt;&lt;/i&gt; Organizations
    &lt;/a&gt;
    &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.priceBook&#34;&gt; &lt;i
      class=&#34;icon ion-ios-book&#34;&gt;&lt;/i&gt; Price Book
    &lt;/a&gt;
   &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.visitplan&#34;&gt; &lt;i
      class=&#34;icon fa fa-map-marker&#34;&gt;&lt;/i&gt; Visits
    &lt;/a&gt;
   &lt;a class=&#34;item item-icon-left&#34; href=&#34;#&#34;&gt; &lt;i
      class=&#34;icon ion-clipboard&#34;&gt;&lt;/i&gt; Place Order
    &lt;/a&gt;
   &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.competitors&#34;&gt; &lt;i
      class=&#34;icon ion-ios-people&#34;&gt;&lt;/i&gt; DF SD
    &lt;/a&gt;
   &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.tax&#34;&gt; &lt;i
      class=&#34;icon ion-ios-calculator&#34;&gt;&lt;/i&gt; DSAF SSF
    &lt;/a&gt;
    &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.serviceRequest&#34;&gt; &lt;i
      class=&#34;icon ion-android-cart&#34;&gt;&lt;/i&gt; FADSF SDFIAF
    &lt;/a&gt;
    &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.baAttandance&#34;&gt; &lt;i
      class=&#34;icon ion-android-checkbox-outline&#34;&gt;&lt;/i&gt; NFASDFJAGDS
    &lt;/a&gt;
   &lt;a class=&#34;item item-icon-left&#34; ui-sref=&#34;appBody.uiTheme&#34;&gt; &lt;i
      class=&#34;icon ion-gear-a&#34;&gt;&lt;/i&gt; ABCDEFF
    &lt;/a&gt;

&lt;/div&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;/ion-content&gt;
</code></pre>

<p><strong>主界面代码:</strong></p>

<pre><code>&lt;ion-header-bar align-title=&#34;center&#34; class={{headerThemeName}}&gt;
&lt;a class=&#34;button fa fa-th&#34; style=&#34;font-size: 18px&#34;
    ui-sref=&#34;appBody.menu&#34;&gt;&lt;/a&gt; &lt;!-- &lt;i class=&#34;fa fa-th&#34;&gt;&lt;/i&gt; --&gt;
&lt;h1 class=&#34;title&#34;&gt;{{Title}}&lt;/h1&gt;
&lt;div class=&#34;buttons&#34;&gt;
    &lt;button class=&#34;button fa fa-search&#34; style=&#34;font-size: 18px;&#34;
      ui-sref=&#34;appBody.search&#34;&gt;&lt;/button&gt;
    &lt;button class=&#34;button ion-plus&#34;
      style=&#34;font-size: 18px; margin-left: 3%&#34; ng-click=&#34;addNew()&#34; ng-show=&#34;addNewHS&#34;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/ion-header-bar&gt;
&lt;div style=&#34;padding-bottom: 15px&#34;&gt;
&lt;ion-spinner icon=&#34;spiral&#34;ng-show=&#34;hasPendingRequests()&#34;&gt;&lt;/ion-spinner&gt;
    &lt;ion-nav-view class=&#34;padding has-header has-footer&#34;
      overflow-scroll=&#34;true&#34;&gt;&lt;/ion-nav-view&gt;

&lt;/div&gt;
</code></pre>

<p>任何帮助将不胜感激。谢谢。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>通过将 <code><ion-view></code> 添加到应用程序结构中来解决此问题，如下所示:</p>

<pre><code>&lt;ion-view&gt;
    &lt;!-- optional subheader for that view --&gt;
    &lt;ion-header-bar class=&#34;bar-subheader&#34;&gt;&lt;/ion-header-bar&gt;

    &lt;ion-content&gt;
      Content for the view
    &lt;/ion-content&gt;

    &lt;!-- optional footer for that view --&gt;
    &lt;ion-footer-bar&gt;&lt;/ion-footer-bar&gt;
&lt;/ion-view&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于android - Ionic ios 应用程序在标题下方显示黑条，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/32600263/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/32600263/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: android - Ionic ios 应用程序在标题下方显示黑条