Use ionic to implement address book interface switching example code
This article mainly introduces the example code of using ionic (tab bar) icon (icon) ionic pull-up menu (ActionSheet) to switch the address book interface. Friends who need it can refer to it. I hope it can help everyone.
Without further ado, I will post the code directly for you. The specific code is as follows:
<!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>
Related recommendations:
Ionic's method of building sidebar carousel image loading animation
Use ionic to achieve infinite carousel and click jump
Introduction to ionic2 lazy loading configuration
The above is the detailed content of Use ionic to implement address book interface switching example code. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

If there is anything that programmers are afraid of, then I think it might be that the needs have changed again! No, after the author developed a browser-based Web application, the customer said: The program needs to be internal (no) internal (network) ) environment... This means that the Python environment cannot be installed! Who calls us programmers? Why don't we just develop a GUI version? It's not a problem for me... But after hearing the time given, I couldn't calm down... ...In order not to affect the customer's evaluation, we can only give one week! Although it is not difficult to conceive the GUI, it needs to sort out the service and the interactive interface with the user. If not, you will have to write a separate interface for the GUI, which is obviously not enough time. ah. No, let’s think of another way...otherwise we can just use the Web

When we use computers to edit word documents, we often don't know where we touched, and the interface suddenly becomes very small. Sometimes the text in the word document cannot be seen clearly. Some people may panic when encountering such a problem, thinking that the computer is malfunctioning. In fact, it is just because you have encountered a certain setting and adjusted the display. So, if you accidentally change the size of the interface display, how should you restore and adjust it? What should I do if the word interface becomes smaller? Below, we will share several ways to solve it. I hope you can easily deal with it when you encounter such a problem. First, we create and open a Word document and perform simple editing operations to show the steps. In the picture below

When it comes to which mobile phone is the most popular recently, many people will probably think of the Xiaomi 14 which was just released. The performance configuration of this mobile phone is very good, and the user experience is also very good. In order to facilitate everyone's daily use, the editor will introduce it to you. Let’s take a look at how to set up the address book blacklist on Xiaomi Mi 14. Let’s take a look at the related content together! How to set up address book blacklist on Xiaomi Mi 14? Open the "Phone" app on the home screen of your phone, then find the "Contacts" option in the bottom navigation bar and click to enter. Browse the contact list, find the contact you want to add to the blacklist, and then press and hold the contact's avatar or name. After a while, a menu will pop up for you to choose an operation. Select "Blacklist this contact" or a similar option in the pop-up menu. The system will display the correct

PHP realizes many-to-one address book: simple and practical contact management. With the popularity of social networks, people's social relationships have become more and more complex, and managing contact information has become more and more important. In this context, it becomes particularly important to develop a simple and practical contact management system. This article will introduce how to use PHP to implement a many-to-one address book to add, delete, modify and search contact information. Functional design Before designing the contact management system, we need to determine the functional modules of the system, which mainly include: adding contacts

For AI, "playing with mobile phones" is not an easy task. Just identifying various user interfaces (UI) is a big problem: not only must the type of each component be identified, but also the symbols used , position to determine the function of the component. Understanding the UI of mobile devices can help realize various human-computer interaction tasks, such as UI automation. Previous work on mobile UI modeling usually relies on the view hierarchy information of the screen, directly utilizing the structural data of the UI, and thereby bypassing the problem of identifying components starting from the screen pixels. However, view hierarchy is not available in all scenarios. This method usually outputs erroneous results due to missing object descriptions or misplaced structural information, so even if you use

In the smartphone market, Samsung's Galaxy series has always attracted attention for its excellent performance and innovative design. As the previous generation machine king, Galaxy S23 Ultra has been loved by consumers since its release. As time goes by, new models emerge one after another. So, can this former machine king still compete today? Next, I will share my actual experience in using Samsung Galaxy S23 Ultra and discuss this issue with everyone. First of all, from the appearance design point of view, Galaxy S23 Ultra still maintains Samsung’s consistent sophistication and high-end. Its unique slightly curved screen design not only enhances the overall aesthetics of the phone, but also brings a more immersive visual experience to users. in daily use

Due to limited time, I will provide you with a sample code for a simple many-to-one address book application based on PHP and MySQL, and provide some explanations. Hope this helps you understand how to build an efficient many-to-one address book application. Title: PHP Programming Tips: Build an Efficient Many-to-One Address Book Application Now, let’s start building this address book application! Step 1: Create a database table First, we need to create a MySQL database table named contacts to store contact data. The structure of the table is as follows: CR

In the development process using Visual Studio Code (VSCode), sometimes the problem of setting the Chinese interface fails. This situation may confuse users because the Chinese interface has been selected during the installation process, but during actual use they find that the English interface is still displayed. Next, we will explore the possible causes of this problem in detail and give specific code examples to solve this problem. First of all, one of the main reasons for the failure of VSCode Chinese interface settings may be the software
