本文主要介绍了使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(actionsheet) 实现通讯录界面切换实例代码,需要的朋友可以参考下，希望能帮助到大家。
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(actionsheet) 实现通讯录界面切换操作</title>
<link rel="stylesheet" href="../ionic/css/ionic.css" rel="external nofollow" >
<script src="../ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('myapp', ['ionic'])
.controller('rootctrl', function($scope) {
$scope.oncontrollerchanged = function(oldcontroller, oldindex, newcontroller, newindex) {
console.log('controller changed', oldcontroller, oldindex, newcontroller, newindex);
console.log(arguments);
};
})
.controller('homectrl', function($scope, $timeout, $ionicmodal, $ionicactionsheet) {
$scope.items = [];
$ionicmodal.fromtemplateurl('newtask.html', function(modal) {
$scope.settingsmodal = modal;
});
//ionic 上拉菜单(actionsheet)
var removeitem = function(item, button) {
$ionicactionsheet.show({
buttons: [],
destructivetext: 'delete task',
canceltext: 'cancel',
cancel: function() {
return true;
},
destructivebuttonclicked: function() {
$scope.items.splice($scope.items.indexof(item), 1);
return true;
}
});
};
var completeitem = function(item, button) {
item.iscompleted = true;
};
$scope.onreorder = function(el, start, end) {
ionic.utils.arraymove($scope.items, start, end);
};
$scope.onrefresh = function() {
console.log('on refresh');
$timeout(function() {
$scope.$broadcast('scroll.refreshcomplete');
}, 1000);
}
$scope.removeitem = function(item) {
removeitem(item);
};
$scope.newtask = function() {
$scope.settingsmodal.show();
};
// create the items
$scope.user = [
{
name:"ben sparrow",
words:"you on your way?"
},
{
name:"max lynx",
words:"hey,it's me."
},
{
name:"adam bradleyson",
words:"i should buy a boat."
},
{
name:"perry governor",
words:"look at my mukluks!"
},
{
name:"mike harrinqton",
words:"this is wicked good ice cream."
},
];
})
</script>
</head>
<body ng-app="myapp" ng-controller="rootctrl">
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="home"
icon-on="ion-ios-filing"
icon-off="ion-ios-filing-outline"
ng-controller="homectrl">
<ion-header-bar class="bar-stable">
<h1 class="title">chats</h1>
</ion-header-bar>
<ion-content has-tabs="true" on-refresh="onrefresh()">
<ion-refresher></ion-refresher>
<ion-list scroll="false" on-refresh="onrefresh()"
s-editing="iseditingitems"
animation="fade-out"
delete-icon="icon ion-minus-circled">
<ion-item ng-repeat="item in user"
item="item"
buttons="item.buttons"
can-delete="true"
can-swipe="true"
on-delete="deleteitem(item)"
ng-class="{completed: item.iscompleted}">
<span>
<img src="../img/y.jpg" height="56" width="56"/>
<p style="margin-left: 66px;margin-top: -50px"><b>{{item.name}}</b></p>
<p style="margin-left: 66px;">{{item.words}}</p>
<i class="ion-chevron-right" style="float: right;margin-top: -32px""></i>
</span>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="about" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
<header class="bar bar-header bar-stable">
<h1 class="title">deadlines</h1>
</header>
<ion-content has-header="true">
<center>
<img src="../img/q.jpg" height="462" width="427"/>
</center>
</ion-content>
</ion-tab>
<ion-tab title="settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
<header class="bar bar-header bar-stable">
<h1 class="title">settings</h1>
</header>
<ion-content has-header="true">
<center>
<img src="../img/y.jpg" height="462" width="427"/>
</center>
</ion-content>
</ion-tab>
</ion-tabs>
</body>
</html>
相关推荐：
ionic构建侧边栏 轮播图 加载动画的方法
用ionic实现无限轮播与点击跳转
有关ionic2懒加载配置介绍
以上就是使用ionic实现通讯录界面切换实例代码的详细内容。