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 相关文章推荐
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
浅谈mint-ui 填坑之路
Nov 06 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
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
PHP5 面向对象程序设计
2008/02/13 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
php常用字符函数实例小结
2016/12/29 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python实现函数极小值
2019/07/10 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python 发送get请求接口详解
2020/11/17 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
测试工程师职业规划书
2014/02/06 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
特岗教师个人总结
2015/02/10 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
医院合作意向书范本
2015/05/08 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
公司档案管理制度
2015/08/05 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
Python中三种花式打印的示例详解
2022/03/19 Python