Ionic5+Angular12中ion-slides内super tabs不显示如何解决

问题根因 #

该问题是ion-slide的默认布局规则和super-tabs的高度计算逻辑冲突导致的：ion-slide默认使用flex布局，不会自动适配内部子元素的总高度，而super-tabs默认需要父容器有明确的高度才能正常渲染，否则高度会被计算为0，自然就无法显示。

修复方案 #

你可以按以下步骤依次调整：

• 给ion-slide调整布局属性，避免子元素被挤压
  在你的全局样式或者对应组件的css文件中添加如下代码：

ion-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

• 给super-tabs设置明确的高度规则，让它可以自动占满slide内的剩余空间

super-tabs {
  flex: 1;
  width: 100%;
  min-height: 300px; /* 可根据你的页面实际需求调整最小值 */
}

如果你的页面不需要自适应高度，也可以直接给super-tabs设置固定高度，比如height: 450px即可。

• 版本兼容性排查
  如果调整样式后还是无法显示，你可以检查@ionic-super-tabs/angular的版本是否适配Ionic 5：Ionic 5需要搭配6.x及以上版本的super tabs使用，低版本本身就存在和ion-slide兼容的问题。

内容的提问来源于stack exchange，提问作者Juan Lopez