Sencha Touch底栏图标不显示

Posted 2023-02-26

【中文标题】Sencha Touch底栏图标不显示

【英文标题】：Sencha Touch bottom bar icons not showing

【发布时间】：2014-08-27 00:13:27

【问题描述】：

我无法在 Sencha Touch 应用程序上查看底部栏图标。

我正在使用指南针和 scss 来设置应用程序的样式。 实际上，经过研究，我正在使用混合：

@include pictos-iconmask('home');

导入标签栏中使用的图标。

条形元素是这样定义的：

标题：'常见问题'， iconCls: '星' ,

而且似乎定义明确，在 Safari 中，检查器显示 -webkit-mask-image:theme_image("default", "pictos/home.png");属性，但这是删除线。在 Chrome 中没有出现该属性，该问题可能是什么原因造成的？

附加的图像显示了两种情况，在顶部的 Safari 和我提到的属性。在底部没有 Safari 显示的“损坏”占位符的栏。

我找到了一个增加图标 z-index 属性的解决方案，但我尝试了这个没有运气。

解决方法是这样的：

.x-tabbar > * 
  z-index: 999 !important;

感谢任何帮助！

编辑 1：有人知道吗？

【问题讨论】：

您可以尝试将图标添加到容器中吗？好像没有加载。只需给容器一个 cls:"test" 并在 scss 中添加 .test:beforecontent'/e600' （无论选项卡内容中图标的数字是多少）。

【参考方案1】：

在 Sencha Touch 2.4.x 中，您需要执行以下操作：

安装 Rub 指南针 导航到应用主文件夹（即到 index.html 文件的级别） 在终端运行sencha app watch

打开 resources/sass/app.scss 并添加以下代码：

// This is different in 2.4.x. In earlier versions it was pictos-iconmask as you've indicated you tried in the question. 

@include icon('browser');

你的标签面板项目应该有iconCls这样的设置：

    .....,
    title: 'Favorites',
    iconCls: 'heart'

附加（可选）步骤：

有时iconCls 已在框架中被注释掉（这在我之前发生过一次）。在这种情况下，请转到 AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

在文件中搜索一行代码：

@else if ($name == "star")  @return "S"; 

如果该行已被注释，请取消注释。