我正在开发一个使用Vue.js和Ionic的应用程序,但我无法弄清楚为什么更新我的Ionic核心版本打破了离子内容标签,我试着谷歌搜索如果标签已经停止,但它没有似乎是这样。
为了说明,我做了一个使用Ionic核心的例子。使用最新的Ionic版本,离子内容标签不会显示,但如果您切换到较旧的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/
有人可以向我解释这里发生了什么吗?
答案 0 :(得分:5)
自@ionic/core
(又名Ionic4)版本0.0.4以来,不再有<ion-page>
。您直接将标题和内容放在<ion-app>
。
如果确实有必要,可以将它们包裹在<div class="ion-page">
。
答案 1 :(得分:-1)
实际上有一些高度问题,因此请导入css并编写此代码
......
css 。高度{ 高度:100vh }
它将解决您的错误