ionic-cyf-directives 文档

cyf-tabs、cyf-tab

前言

众所周知，ionic 中的 ion-tabs 存在一些“坑”，例如，如果你希望从 ion-tabs 内导航到外部的 ion-nav-view，则不会有切换动画，在导航栏也不会有“返回按钮”让用户能返回上一页。如果用 cyf-tabs 替代 ion-tabs，则可解决此问题，并且 cyf-tabs 提供了更多的功能，例如：可设置 tab 之间的切换效果、可通过滑动内容区在 tab 之间切换。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>cyf-nav-view</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
<script src="js/ionic-cyf-directives.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

<script id="tplTabs" type="text/ng-template">
<ion-view>
<!-- 用 cyf-tabs 替代 ion-tabs -->
<cyf-tabs class="tabs-positive tabs-icon-top">
<!-- 用 cyf-tab 替代 ion-tab -->
<!-- 与 ion-tab 不同，cyf-tab 内会自动生成一个 ion-nav-view 用来渲染模板， -->
<!-- 属性 view-name 的值为该 tab 内的 ion-nav-view 的 name 属性的值 -->
<cyf-tab view-name="view1" title="选项一" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="tab1"></cyf-tab>
<cyf-tab view-name="view2" title="选项二" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" ui-sref="tab2"></cyf-tab>
</cyf-tabs>
</ion-view>
</script>
<script id="tpl1" type="text/ng-template">
<ion-view view-title="Tab1">
<ion-content>
这是Tab1的内容<br />
<a href="#/detail">点击进入Detail页</a>
</ion-content>
</ion-view>
</script>
<script id="tpl2" type="text/ng-template">
<ion-view view-title="Tab2">
<ion-content>
这是Tab2的内容
</ion-content>
</ion-view>
</script> <script id="tplDetail" type="text/ng-template">
<ion-view view-title="Detail">
<ion-content>
这是Detail的内容
</ion-content>
</ion-view>
</script>

<script type="text/javascript">
// 要使用 ion-cyf-directives 中的子令，需依赖于 cyfDirectives 模块
var app = angular.module('myApp', ['ionic', 'cyfDirectives']);
app.config(function ($stateProvider) {
// 配置路由
$stateProvider.state('tabs', {
abstract: true,
templateUrl: 'tplTabs'
}).state('tab1', {
url: '/tab1',
parent:'tabs',
views: {
view1: {
templateUrl: 'tpl1'
}
}
}).state('tab2', {
url: '/tab2',
parent:'tabs',
views: {
view2: {
templateUrl: 'tpl2'
}
}
}).state('detail', {
url: '/detail',
templateUrl: 'tplDetail'
});
});
app.controller('myController', function ($state, $scope) {
$state.go('tab1');
});
</script>
</body>
</html>

与 ion-tabs 相比，cyf-tabs 拥有更多的属性：

effect：设置 tab 之间的切换效果。可接受的值有：fade（淡入淡出，默认值）、slide（从右向左滑入）。

only-external：是否不可通过滑动 tab 的内容区域以在 tab 之间切换。可接受的值有：true（不可通过滑动tab的内容区域以在tab之间切换，默认值）、false。

将上个示例中的 cyf-tabs 修改为：

<!-- 将 only-external 设为 false，允许通过滑动 tab 的内容区域以在 tab 之间切换 -->
<!-- 将 effect 设为 slide，将 tab 之间的切换效果设为从右向左滑入 -->
<cyf-tabs only-external="false" effect="slide" class="tabs-positive tabs-icon-top">
<!-- ...... -->
</cyf-tabs>

最后，来个广告

若你觉得此文不错，请分享，若认为尚需改进，请点讚。

结束语

Ionic基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。