这篇文章主要介绍HTML中实现通讯录界面切换的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联专注于沾化企业网站建设,响应式网站开发,商城网站建设。沾化网站建设公司,为沾化等地区提供建站服务。全流程按需制作网站，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务
具体代码如下所示：
用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作
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."
},
];
})
Chats
{{item.name}}
{{item.words}}
Deadlines
Settings
