ionic 隐藏ion-tab

最新推荐文章于 2021-06-09 11:07:33 发布

天青色等烟雨love

最新推荐文章于 2021-06-09 11:07:33 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic 文章标签： ionic

本文链接：https://blog.youkuaiyun.com/u012416928/article/details/54020319

ionic 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种根据不同用户角色动态展示不同Tab的方法。一种是先显示所有Tab再根据条件隐藏；另一种则是根据条件直接选择显示相应的Tab集合。这两种方法都能有效实现用户界面的个性化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要实现对不同的人看到不同的tab，所以出现这个问题,有两种解决办法
1.第一种先把所有选项卡显示出来，在通过数据判断隐藏一个

$scope.is_agent_doctor = true;//注意这里必须先让他设置为true，不然顺序会变

function(){

    //可以在这里设置网络请求
    $scope.is_agent_doctor = value;
}


<ion-tabs class="tabs-top tabs-striped">
    <ion-tab title="个人信息" href="#/tab/doctor_info">
        <ion-nav-view name="info-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="业务统计" href="#/tab/perfor" ng-if="is_agent_doctor">
        <ion-nav-view name="perfor-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="拜访记录" href="#/tab/visit_record">
        <ion-nav-view name="visit-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

2.第二种就是设置tabs的隐藏了，代码如下

<link rel="stylesheet" href="/assets/tabs.css">
<ion-tabs class="tabs-top tabs-striped" ng-if="is_agent_doctor">
    <ion-tab title="个人信息" href="#/tab/doctor_info">
        <ion-nav-view name="info-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="业务统计" href="#/tab/perfor" >
        <ion-nav-view name="perfor-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="拜访记录" href="#/tab/visit_record">
        <ion-nav-view name="visit-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

<ion-tabs class="tabs-top tabs-striped" ng-if="!is_agent_doctor">
    <ion-tab title="个人信息" href="#/tab/doctor_info">
        <ion-nav-view name="info-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="拜访记录" href="#/tab/visit_record">
        <ion-nav-view name="visit-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>