【问题标题】:ion-content won't show when using Ionic core 4使用 Ionic core 4 时不会显示 ion-content
【发布时间】:2018-10-20 06:34:35
【问题描述】:

我正在开发一个使用 Vue.js 和 Ionic 的应用程序,但我无法弄清楚为什么更新我的 Ionic 核心版本会破坏 ion-content 标签,如果标签已停用,我尝试使用谷歌搜索,但它没有好像不是这样的。

为了说明,我做了一个使用 Ionic 核心的例子。使用最新的 Ionic 版本时,不会显示 ion-content 标签,但如果您切换到较旧的 Ionic 版本,它会显示得很好。

<head>
    <meta charset="UTF-8">
    <title>Ionic Test</title>
    <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <!-- <script src="https://unpkg.com/@ionic/core@0.0.2-30/dist/ionic.js"></script> -->
</head>
<body>
    <ion-app>
        <ion-page>
        <ion-header>
            <ion-toolbar>
            <ion-title>Example</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="content" padding>
            <ion-list>
                </ion-item>
                    <ion-label full>I'm an example text...</ion-label>
                    <ion-button>Example button</ion-button>
                </ion-item>
            </ion-list>
        </ion-content>
        </ion-page>
    </ion-app>
</body>

这是此代码的 jsFiddle:https://jsfiddle.net/telmo/chk9h080/

有人可以向我解释这里发生了什么吗?

【问题讨论】:

  • 你忘记打开ion-item标签..&lt;ion-item&gt;。错字?
  • 没错,刚刚修好了!

标签: ionic-framework ionic4


【解决方案1】:

@ionic/core(又名Ionic4)版本0.0.4 起,不再有&lt;ion-page&gt;。你直接把你的标题和内容放在&lt;ion-app&gt;下面。

如果确实需要,您可以将它们包装在 &lt;div class="ion-page"&gt; 中。

【讨论】:

  • 你们都是对的,删除 ion-page 标签可以让 ion-content 标签再次出现。谢谢!
  • @ShashwatTripathi:Suraj 的小提琴坏了,因为现在 Ionic4 也需要加载它的 CSS 文件。这是一个固定的小提琴:jsfiddle.net/arhz6rss/41
【解决方案2】:

其实高度有问题,所以导入css并写这段代码

......

CSS 。高度{ 高度:100vh }

它会解决你的错误

【讨论】:

  • 他提到他的解决方案适用于较旧的 Ionic 版本,这是一个样式问题吗?
  • 实际上我在 Ionic 5 中遇到了这个问题,所以在添加样式表后它可以工作
猜你喜欢
  • 1970-01-01
  • 2019-06-13
  • 1970-01-01
  • 1970-01-01
  • 2019-04-23
  • 1970-01-01
  • 1970-01-01
  • 2018-08-09
  • 1970-01-01
相关资源
最近更新 更多