jquery - 如何隐藏 Ionic Framework 中的选项卡

标签 jquery css ionic-framework

我选择了 ionic 选项卡 View ,因此我可以使用模板系统,但我无法删除选项卡。我想要这样的 View ,我确实设法删除了标题栏,但我无法删除标签栏

enter image description here

这是我到目前为止得到的:

enter image description here

如果我隐藏标签栏 (ion-tabs{display:none}) 它也会删除内容,这不是我想要的。

最佳答案

我知道这已经得到解答,但有一种更“有 Angular ”的方法可能会有所帮助。 这是通过使用自定义指令完成的,您可以将其应用于不想显示底部标签栏的 View 。

我的应用对此的解决方案是:

1 - 使用 ng-hide绑定(bind)到选项卡栏上的 rootScope 变量,因此我可以在我的应用程序的任何 Controller / View 中隐藏/显示它:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - 创建一个自定义指令,当存在时,将隐藏标签栏(并在 View 被销毁/关闭时再次显示标签栏:

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - 将其应用于不需要标签栏可见的特定 View :

<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->
</ion-view>

ps:我认为这可以改进甚至进一步避免需要 ng-hide<ion-tabs> 上声明,让指令完成所有“肮脏的工作”。

关于jquery - 如何隐藏 Ionic Framework 中的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23991852/

相关文章:

css - 如何创建弹出式多列菜单?

css - Ionic 3 - approxItemHeight 在 vi​​rtualScroll 中不起作用

ios - 无法创建配置文件错误

javascript - 基于单选按钮显示/隐藏表单字段

jquery - Chrome 中的 Jquery CSS 问题

javascript - 将事件附加到动态元素

html - 只为 parent 而不是 child 申请CSS

javascript - Angular JS 应用程序设备后退按钮必须有确认对话框

javascript - 调整悬停时内容的垂直对齐方式

php - 显示实时