이 글에서는 ionic(탭바) 아이콘(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을 사용하여 주소록 인터페이스 전환 예제 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!