Ionic 2 实现列表滑动删除按钮的方法


Posted in Javascript onJanuary 22, 2017

在上篇文章给大家介绍了ionic中列表项增加和删除的实现方法,接下来通过本文给大家介绍Ionic 2 实现列表滑动删除按钮的方法,具体内容详情如下所示:

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

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

Ionic 2 实现列表滑动删除按钮的方法

删除例子

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

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

Ionic 2 实现列表滑动删除按钮的方法

删除例子

5.添加一个编辑按钮

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

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

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

Ionic 2 实现列表滑动删除按钮的方法

添加编辑按钮

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

总结

Ionic2 这个特性真是太棒了,不仅能删除,还能轻易的添加其它按钮。

这同时也是一个非常完美的UI元素节省屏幕空间,不会显示这些信息除非你滑动屏幕。

以上所述是小编给大家介绍的Ionic 2 实现列表滑动删除按钮的方法,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php header功能的使用
2013/10/28 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
给Function做的OOP扩展
2009/05/07 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python中的lambda表达式用法详解
2016/06/22 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
接口可以包含哪些成员
2012/09/30 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
实现GO语言对数组切片去重
2022/04/20 Golang
hive数据仓库新增字段方法
2022/06/25 数据库