Ionic 2 :如何实现列表滑动删除按钮1.创建Ionic2应用2.准备列表数据3.修改主页(HOME)的模版4.创建方法删除数据5.添加一个编辑按钮总结

使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了,意味着你可以设计更好的app而不需要很强的用户体检设计背景,而且让你可以更容易实现这些模式。

这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式。本教程将涵盖创建这个滑动删除按钮所需要的一切。

删除例子

1.创建Ionic2应用

通过以下命令行语句创建新的Ionic2应用:

ionic start ionic2-delete blank --v2

这里我使用了–v2标志位,为了告诉Ionic命令行我们创建的是Ionic2项目。

2.准备列表数据

我们需要一些维护数据,因此要建立一些试验数据。创建我们项目的blank模版默认建立了一个Home组件,这个教程我们就在此基础上修改。 既然Ionic2还很新,我将这些步骤尽量阐述详细,下面我们看看app/home/home.js文件:

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

constructor 方法在组件创建是执行,因此我们在这里准备试验数据。你可能已经注意到我们已经给这个组件定义了模版,随后将展示如何在模版中使用在这里添加的数据。

home.js 文件修改如下:

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'}
    ];
 
  }
}

现在我们有一些数据可以删除了。

3.修改主页(HOME)的模版

接下来我们编辑home.html来建立模版。现在的模版是包含一些创建<ion-card>的代码,而我们要用<ion-list>来代替:

修改 home.html如下:

<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>

这只是创建了只有一个单项的列表,接着我们将添加滑动元素。

继续修改home.html如下:

<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>

通过上下对比,你应该看到:我们用ion-item-sliding替换了ion-item 。这允许我们创建一个ion-item-options 部件,当用户滑动列表元素时,它将显示出来。 这段代码还创建了一个删除按钮,当ion-item-options部件显示出来时,可以点击按钮,这时会触发类中定义的removeItem (暂无,接下来添加)。另外,我们不止是一个单项,我们要为我们创建的数组的每一个数据创建滑动项,这里我使用ng-for

还是修改home.html如下:

<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>

现在我们循环在类中定义的items数组的每个item项,然后为每个项创建一个 ion-item-sliding指令。注意我们使用的是#item而不是item。这将创建一个本地引用到迭代获得的item,这让我们可以使用** { {item.title} } 输出标题,它还允许我们传递item的引用到我们的 removeItem 函数。 我们现在有了一个列表包含所有数据,用户可以滑动并显示出一个delete**按钮。现在剩下的是当用户点击时做点什么事。因此我们设置一个简单监听以便调用方法从我们先前创建的测试数据中删除一项。

4.创建方法删除数据

现在我们去到 home.js 文件编写方法处理数据删除。当前但删除按钮被点击时传送一个数据项给 removeItem。类似的,你可以非常容易的实现例如删除、编辑、分享、播放动画等你需要的东西,不仅是删除。

修改 home.js 如下:

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);
      }
 
    }
 
  }
 
}

现在你向左侧滑动列表项,然后点击删除按钮,它就会从列表中删除。就像下面这样:

删除例子

5.添加一个编辑按钮

这里将不会将Edit按钮的全过程走一遍,但是你可以轻易扩展活动项并添加编辑按钮,如下所示:

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

现在滑动时你有两个按钮了,看下面:

添加编辑按钮

然后你可以编写Edit按钮的点击事件了,具体取决于你的需求。

总结

Ionic2 这个特性真是太棒了,不仅能删除,还能轻易的添加其它按钮。 这同时也是一个非常完美的UI元素节省屏幕空间,不会显示这些信息除非你滑动屏幕。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构笔记

python爬虫系列之 xpath实战:批量下载壁纸

我们要爬取的目标网站是:http://www.netbian.com/,这个网站长这样:

3284
来自专栏更流畅、简洁的软件开发方式

分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?

目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,...

3185
来自专栏从零开始学自动化测试

Appium+python自动化25-windows版appium_desktop_V1.7.1

一、 appium_desktop_v1.2.6 1.appium_desktop在github上最新下载地址:[releases/tag/v1.2.6](h...

3453
来自专栏macOS 开发学习

Mac开发之 Cocoa 绑定 入门

从iOS开发转为Mac OSX应用开发的过程中,cocoa 绑定算是比较大的一个差异,也是OSX上比较实用的技术,cocoa 绑定让开发者节省了大量的代码,可以...

1012
来自专栏企鹅号快讯

小程序开发的40个技术窍门,纯干货!

微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

25010
来自专栏葡萄城控件技术团队

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12...

2118
来自专栏张戈的专栏

原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!就进一步折腾了一下,目前这个 js 已实现以下多种功能: 一、功能描述...

47712
来自专栏mukekeheart的iOS之旅

iOS学习——iOS项目Project 和 Targets配置详解

  最近开始学习完整iOS项目的开发流程和思路,在实际的项目开发过程中,我们通常需要对项目代码和资料进行版本控制和管理,一般比较常用的SVN或者Github进行...

5127
来自专栏沈唁志

几个实用的 WordPress 代码片段

1613
来自专栏守望轩

Visual Studio 2008 每日提示(七)

#061、增大编辑器工具提示的字体 原文地址:http://blogs.msdn.com/saraford/archive/2007/10/15/did-yo...

2704

扫码关注云+社区

领取腾讯云代金券