ionic tabs-top

类似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;
};
这样这个效果就可以实现啦~

 

posted @ 2015-04-18 11:05  白洋花海  阅读(645)  评论(0编辑  收藏  举报