使用 Ionic core 4 时不会显示离子含量

Question

我正在开发一个使用 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/

谁能给我解释一下这是怎么回事？

Answer 1

自 @ionic/core（又名 Ionic4）版本 0.0.4 以来，不再有 <ion-page>。你直接把你的header和内容放在<ion-app>下。

如果确实有必要，您可以将它们包装在 <div class="ion-page">.

中

Answer 2

实际上有一些高度问题，所以导入css并编写此代码

......

css 。高度{ height:100vh }

它将解决您的错误

使用 Ionic core 4 时不会显示离子含量

ion-content won't show when using Ionic core 4

ionic-framework

ionic4