Ionic 2 实现列表滑动删除按钮的方法
在上篇文章给大家介绍了ionic中列表项增加和删除的实现方法,接下来通过本文给大家介绍Ionic 2 实现列表滑动删除按钮的方法,具体内容详情如下所示:
使用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元素节省屏幕空间,不会显示这些信息除非你滑动屏幕。
以上所述是小编给大家介绍的Ionic 2 实现列表滑动删除按钮的方法,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家分享了js滑动提示效果代码,实现方法简单,感兴趣的小伙伴们可以参考一下...2016-03-12
- 这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信,内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别,需要的朋友可以参考借鉴。...2017-01-26
- Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧...2016-06-12
- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- 这篇文章主要介绍了mysql delete 多表连接删除功能的相关资料,需要的朋友可以参考下...2017-03-14
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25- 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧...2017-01-26
- 可以利用js函数来实现对表格的维护和删除,相对于JavaScript简单方便,下面通过实例代码给大家介绍下jQuery表格的维护和删除操作,一起通过本文学习吧...2017-02-08
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
这篇文章主要介绍了jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
这篇文章主要介绍了Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析的相关资料,需要的朋友可以参考下...2016-01-21快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题,感兴趣的小伙伴们可以参考一下...2016-04-18- 这篇文章主要介绍了Mysql一些复杂的sql语句(查询与删除重复的行),需要的朋友可以参考下...2017-05-25
- 这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
这篇文章主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下...2016-05-05基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
本文结合实例给大家介绍如何实现内容滑动切换的效果,包括左右箭头切换,无限无缝滚动,圆点按钮切换,动画效果,自动切换效果,效果非常不错,感兴趣的朋友前来参考实现代码 ...2016-06-24- 本文给大家分享一段jquery代码实现滑动按钮开关的效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下...2016-12-02
- 下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20