小程序满足多需求_使用ionic(选项卡栏tab) icon(图标

使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码       这篇文章主要介绍了使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码,需要的朋友可以参考下
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 = []; $', 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; pleteItem = 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 ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ng-controller="HomeCtrl" ion-header-bar h1 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- span img src="../img/y.jpg" height="56" width="56"/ p b {{item.name}} /b /p p {{item.words}} /p i " /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 h1 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 h1 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(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关阅读