Ionic 2 :如何实现列表滑动删除按钮
http://blog.csdn.net/h254532699/article/details/54382123
使用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'
伦理片 http://www.dotdy.com/
@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元素节省屏幕空间,不会显示这些信息除非你滑动屏幕。
ionic2 tabs使用 Modal底部tab弹出框
项目要实现一个功能,在首页底部中间的tab弹出一个页面,而且是没有底部栏的,而不是像平常滑动的一个子页面。
像这样:
做法其实很简单
1.修改tabs.html中的tab,去掉[root]="tab2root"属性,就不会显示子页面了
2.添加(ionSelect)方法,点击这个tab按钮的事件,用来显示你的弹出modal
去掉之前:
- <ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)="call()" ></ion-tab>
去掉之后:
- <ion-tab tabIcon="call" (ionSelect)="call()" ></ion-tab>
3.在tabs.ts中显示实现(ionSelect)方法的call()方法,以显示modal
- 引入ModalController
- import { NavController, NavParams,ModalController,ViewController,Tabs } from 'ionic-angular';
- 声明ModalController
- constructor(public navCtrl: NavController, public navParams: NavParams,<span style="color:#ff0000;">public modalCtrl: ModalController,</span>public viewCtrl: ViewController) {
- }
- 实现call方法
- call(){
- let modal = this.modalCtrl.create(CallModalPage);
- modal.present();
- }
大功告成!
Ionic 2 :如何实现列表滑动删除按钮的更多相关文章
- Android 编程下代码之(QQ消息列表滑动删除)
这份代码写出来有些时候了,一直没共享,现在把它共享给大家.简单列一下代码中你可以学到的知识点: 自定义控件的实现方式: 事件的拦截分发消费机制: QQ会话列表滑动删除原理: 最后附上源码链接:Q ...
- [Phonegap+Sencha Touch] 移动开发72 List列表横向滑动操作(仿QQ列表滑动删除)
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50425744 本插件有2个版本号:sencha touch 版本号和 extjs6 m ...
- Android仿微信SlideView聊天列表滑动删除效果
package com.ryg.slideview; import com.ryg.slideview.MainActivity.MessageItem; //Download by http://w ...
- framework7滑动删除列表触发chrome 报错解决办法
使用 <div class="list-block"> <ul> <li class="swipeout"> <div ...
- 【转】Android 实现ListView的滑动删除效果
http://www.cnblogs.com/weixiao870428/p/3524055.html http://download.csdn.net/download/love_javc_you/ ...
- QML学习笔记(八)— QML实现列表侧滑覆盖按钮
QML实现列表右边滑动删除按钮,并覆盖原有的操作按钮,点击可实现删除当前项 本文链接:QML实现列表侧滑覆盖按钮 作者:狐狸家的鱼 GitHub:八至 列表实现在另一篇博客已经提及,列表可选中.拖拽. ...
- 微信小程序列表项滑动显示删除按钮
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...
- js移动端向左滑动出现删除按钮
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...
- ios8 tableView设置滑动删除时 显示多个按钮
** * tableView:editActionsForRowAtIndexPath: //设置滑动删除时显示多个按钮 * UITableViewRowAction ...
随机推荐
- 01 lucene基础 北风网项目培训 Lucene实践课程 Lucene概述
lucene-core-2.4.1.jar是lucene开发的核心jar包,lucene-analyzers-2.4.1.jar也是必不可少的.lucene-highlighter-2.4.1.jar ...
- Ros学习——Cmakelists.txt文件解读
1.过程 .Required CMake Version (cmake_minimum_required) //CMake 需要的版本 .Package Name (project()) //#定义工 ...
- shiro 集成spring 配置 学习记录(一)
首先当然是项目中需要增加shiro的架包依赖: <!-- shiro --> <dependency> <groupId>org.apache.shiro</ ...
- linux常用的一些命令行操作(ubuntu)
软件安装 sudo apt-get install xxx 压缩和解压缩 1. *.tar 用 tar –xvf 解压 2. *.gz 用 gzip -d或者gunzip 解压 3. *.tar.gz ...
- select下拉列表
1.写 <!DOCTYPE html> <html> <head> <title></title> <script language= ...
- [Training Video - 7] [Database connection] Various databases which are supported, Drivers for database connection, SQL Groovy API
Various databases which are supported Drivers for database connection groovy.sql.Sql package SoapUI怎 ...
- [SoapUI] 循环遍历某个Test Case下的所有Test Step,将Cookie传递给这些Test Step
import com.eviware.soapui.support.types.StringToStringMap //Get cookie's value from the project leve ...
- Sed命令n,N,d,D,p,P,h,H,g,G,x解析3
摘自:https://blog.csdn.net/WMSOK/article/details/78463199 Sed命令n,N,d,D,p,P,h,H,g,G,x解析 2017年11月06日 23: ...
- QT学习之事件处理
Qt事件机制 Qt程序是事件驱动的, 程序的每个动作都是由幕后某个事件所触发.. Qt事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. Qt事件的类型很多, 常见的qt的事件如下: 键盘事 ...
- 读取txt文件,并用其他格式显示
这篇博客参照http://www.cnblogs.com/insus/archive/2013/08/08/3247078.html 题目是这样的: 一个txt文件,内容格式: 39.4% 2013- ...