ionic tabs-top

来源：互联网发布：山寨币源码thinkphp 编辑：程序博客网时间：2024/05/19 08:04

类似QQ软件中，首页面消息和通话的两个按钮来回切换各自的内容，还是很常见的功能。

（.bar-subheader是为了防止内容部分隐藏在header下）

<ion-view title="消息通知" class="view-tabs-top">
<div class="tabs tabs-top tabs-virtual bar-subheader">
　　<a href class="tab-item disable-user-behavior"
　　　　　　ng-class="{active: active_content=='orders'}"
　　　　　　ng-click="setActiveContent('orders')"
　　　　 style="border: 2px solid #2495FB; border-right: 0px;">
　　　　设备消息
　　</a>
　　<a href class="tab-item disable-user-behavior"
　　　　　　ng-class="{active: active_content=='deliveries'}"
　　　　　　ng-click="setActiveContent('deliveries')"
　　　　　　style="border: 2px solid #2495FB">
　　　　　　系统消息
　　</a>
</div>
<ion-content class="has-subheader" padding="true" ng-show="active_content=='orders'"> 设备消息</ion-content>

<ion-content class="has-subheader" padding="true" ng-show="active_content=='deliveries'"> 系统消息</ion-content>

</ion-view>

在控制器中使用：

$scope.active_content = 'orders'; 
$scope.setActiveContent = function (active_content) {     
　　$scope.active_content = active_content; 
};
这样这个效果就可以实现啦~

0 0