Ionic 2 implements the list sliding delete button method, ionic sliding

Ionic 2 implements the list sliding delete button method, ionic sliding

In the previous article, we introduced how to add and delete list items in ionic. Next, we will introduce how Ionic 2 can implement the sliding delete button in list. The details are as follows:

The great thing about using the Ionic framework is that the user interface elements are ready by default, which means you can design a better app without a strong background for user health check, it also makes it easier for you to implement these modes.

This tutorial will show you how to use Ionic2 to add a simple delete button to the list when the user slides the list item to the left. This is a common mode for processing and deleting list data. This tutorial covers everything you need to create this sliding delete button.

Delete example

1. Create an Ionic2 Application

Use the following command line statement to create a new Ionic2 application:

ionic start ionic2-delete blank --v2

Here I used the-v2 flag. To tell the Ionic command line, we created the Ionic2 project.

2. Prepare the List Data

We need some maintenance data, so we need to establish some experimental data. By default, a Home component is created for the blank template of our project. In this tutorial, We will modify the blank template.

Since Ionic2 is still quite new, I will elaborate on these steps as much as possible. Next let's look at the app/home. js file:

import {Page} from 'ionic/ionic'

Ethics http://www.dotdy.com/

@Page({ templateUrl: 'app/home/home.html',})export class HomePage { constructor() {}}

The constructor method is executed in component creation, so we will prepare the test data here. You may have noticed that we have defined a template for this component and will then demonstrate how to use the data added here in the template.

Modify the home. js file as follows:

import {Page} from 'ionic/ionic'@Page({ templateUrl: 'app/home/home.html',})export class HomePage { constructor() { this.items = [  {title: 'item1'},  {title: 'item2'},  {title: 'item3'},  {title: 'item4'},  {title: 'item5'},  {title: 'item6'} ]; }}

Now we can delete some data.

3. Modify the homepage Template

Next, we edit home.html to create a template. The current template contains some code for creating <ion-card>, instead of <ion-list>:

Modify home.html as follows:

<ion-navbar *navbar> <ion-title> Home </ion-title></ion-navbar><ion-content> <ion-list> <ion-item>  I'm just a plain old item in a list... </ion-item> </ion-list></ion-content>

This only creates a list with only one item, and then we will add a slide element.

Follow-up modification of home.html as follows:

<ion-navbar *navbar> <ion-title> Home </ion-title></ion-navbar><ion-content> <ion-list> <ion-item-sliding> <ion-item> Swipe me to the left </ion-item> <ion-item-options>  <button danger (click)="removeItem()"><icon trash></icon> Delete</button> </ion-item-options> </ion-item-sliding> </ion-list></ion-content>

Through the upper-lower comparison, you can see that we replaced ion-item-sliding with ion-item. This allows us to create an ion-item-options part, which is displayed when the user slides the list element.

This Code also creates a delete button. When the ion-item-options component is displayed, you can click the button to trigger the removeItem defined in the class (not available yet, then add ). In addition, we are not just a single item. We want to create a slide for each data in the array we create. Here I use ng-.
Also, modify home.html as follows:

<ion-navbar *navbar> <ion-title> Home </ion-title></ion-navbar><ion-content> <ion-list> <ion-item-sliding *ng-for="#item of items"> <ion-item> {{item.title}} </ion-item> <ion-item-options>  <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button> </ion-item-options> </ion-item-sliding> </ion-list></ion-content>

Now we loop through every item in the items array defined in the class, and then create an ion-item-sliding command for each item. Note that we use # item instead of item. This will create a local reference to the item obtained by iteration, which allows us to use {item. title} output title, which also allows us to pass the reference of item to our removeItem function.

Now we have a list containing all the data. You can slide and display a delete button. What's left is what you do when you click. Therefore, we set a simple listener to call a method to delete an item from the test data we created earlier.

4. Create a method to delete data

Now let's go to the home. js file writing method to process data deletion. When the delete button is clicked, a data item is sent to removeItem. Similarly, you can easily implement such operations as deletion, editing, sharing, and playing animations.

Modify home. js as follows:

import {Page} from 'ionic/ionic'@Page({ templateUrl: 'app/home/home.html',})export class HomePage { constructor() { this.items = [  {title: 'item1'},  {title: 'item2'},  {title: 'item3'},  {title: 'item4'},  {title: 'item5'},  {title: 'item6'} ]; } removeItem(item){ for(i = 0; i < this.items.length; i++) {  if(this.items[i] == item){  this.items.splice(i, 1);  } } }}

Now you move the list item to the left and click the delete button to delete it from the list. As shown below:

Delete example

5. Add an edit button

The entire process of the Edit button will not be repeated here, but you can easily expand the activity item and add the Edit button, as shown below:

<ion-item-options> <button primary>Edit</button> <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button></ion-item-options>

Now you have two buttons while sliding. See the following:

Add edit button

Then you can write the Click Event of the Edit button, depending on your needs.

Summary

Ionic2 is a great feature. It can be deleted and easily added with other buttons.

This is also a perfect UI element that saves screen space and does not display this information unless you slide the screen.

The above is a small Editor to introduce you to Ionic 2 to achieve the list sliding delete button method, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!