ion-item 内的 Ionic 4 ion-skeleton 未填充项目空间答案

【问题标题】：Ionic 4 ion-skeleton inside ion-item is not filling the item spaceion-item 内的 Ionic 4 ion-skeleton 未填充项目空间
【发布时间】：2019-09-29 18:29:58
【问题描述】：

我正在尝试在ion-item 中使用ion-skeleton。与其让骨架文本填充整个 ion-item 空间，不如将其压缩在几个像素空间中。

我注意到骨架文本容器 (ion-text) 在没有任何文本的情况下不会拉伸。

我还尝试了以下方法但没有成功： - 使用 div 而不是 ion 文本 - 删除 h1 和 p - 使用Flex Properties 的任意组合作为.ion-align-items-stretch 和.ion-align-items-stretch

这是我的项目的结构：

<ion-item class="ion-no-padding" lines="full" detail="true" *ngFor="let num of [0,1,2,3,4,5]">
  <ion-thumbnail slot="start">
    <ion-skeleton-text animated="true"></ion-skeleton-text>
  </ion-thumbnail>
  <ion-text>
    <h1><ion-skeleton-text animated="true"></ion-skeleton-text></h1>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
  </ion-text>
</ion-item>

我得到了什么：

提前致谢，亲切的问候。

【问题讨论】：

标签： css ionic-framework ionic4

【解决方案1】：

Ionic 中美丽完美的骨架屏

HTML 代码

<ion-list lines="none" *ngFor="let x of [1,2,3]">
    <ion-item>
      <ion-skeleton-text width="40%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
    <ion-item>
      <ion-skeleton-text width="60%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
    <ion-item>
      <ion-skeleton-text width="100%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
  </ion-list>

CSS 代码

.animate-skeleton-background {
 height:20px;
 -webkit-animation: infinite bgcolorchange 2s;
 animation: 2s infinite bgcolorchange;
 opacity: 0.5;
}

@keyframes bgcolorchange {
0% {
color: #f2f2f2;
}
25% {
background: lightgray;
}
50% {
background: #f2f2f2;
}
75% {
background: lightgray;
}
100% {
background-color: #f2f2f2;
}
}

@-webkit-keyframes bgcolorchange {
0% {
background: #f2f2f2;
}
25% {
background: lightgray;
}
50% {
background: #f2f2f2;
}
75% {
background: lightgray;
}
100% {
background: #f2f2f2;
}
}

【讨论】：

【解决方案2】：

我自己想通了，这个想法是在回答问题时触发的。

就这么简单：只需将以下内容添加到页面的 scss 表中：

ion-text {
  min-width: 100%;
}

【讨论】：