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 实现列表滑动删除按钮的方法,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

    Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在iOS和Android的底部tabs显示不一样.在安卓情况下底部tabs会浮上去. 如下图展示: 网上也有很多此类的解决方案,但是我觉得说一千道一万都不如给个dome实在,下面附上解决方案的dome,大家可以看看! <!DOCTYPE html> <html ng-app="ionic"> <head> <meta charset="UTF-8">

  • ionic2如何处理android硬件返回按钮

    问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();). 2.要么请求用户确认(添加一个Confirmation Alerts). 3.按一下提示,按两下退出(加一个方法用toast提醒). 这里用第三种展示. 解决 在app.html中,添加#myNav,在app.c

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

    在上篇文章给大家介绍了ionic中列表项增加和删除的实现方法,接下来通过本文给大家介绍Ionic 2 实现列表滑动删除按钮的方法,具体内容详情如下所示: 使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了,意味着你可以设计更好的app而不需要很强的用户体检设计背景,而且让你可以更容易实现这些模式. 这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候.这是一个处理删除列表数据时候常用的模式.本教程将涵盖创建这个滑动删除按钮所需要的一切. 删除例子

  • Android高仿微信对话列表滑动删除效果

    前言 用过微信的都知道,微信对话列表滑动删除效果是很不错的,这个效果我们也可以有.思路其实很简单,弄个ListView,然后里面的每个item做成一个可以滑动的自定义控件即可.由于ListView是上下滑动而item是左右滑动,因此会有滑动冲突,也许你需要了解下android中点击事件的派发流程,请参考Android源码分析-点击事件派发机制.我的解决思路是这样的:重写ListView的onInterceptTouchEvent方法,在move的时候做判断,如果是左右滑动就返回false,否则返

  • Android仿QQ列表滑动删除操作

    这篇山寨一个新版QQ的列表滑动删除,上篇有说到QQ的滑动删除,推测原理就是ListView本身每个item存在一个Button,只不过普通的状态下隐藏掉了,检测到向左的滑动事件的时候弹出隐藏的Button,不过再切换Button状态的时候会给Button一个出现和隐藏的动画.下面实现这个ListView. 首先有个难点就是通过ListView获取它某个item的View,对于ViewGroup,可以直接调用getChildAt()方法获取对应的子view,但是在ListView直接使用getCh

  • Android仿微信列表滑动删除之可滑动控件(一)

    这次是列表滑动删除的第三波,仿微信的列表滑动删除.先上个效果图: 前面的文章里面说过开源框架SwipeListView的实现原理是每个列表item中包含上下两层view,普通状态下上层的view覆盖着下层的view,当用户滑开上层的view,下层的view就显示出来了.但是仔细观察微信列表的item,很明显并非这个实现方案,微信的item应该一个单层view,只不过这个item超出了所在的ListView的宽度,在用户滑动item的时候,item超出屏幕的view则会显示在屏幕之上,这种滑动实现

  • Android仿微信对话列表滑动删除效果

    微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理  1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2

  • Python列表元素删除和remove()方法详解

    删除列表中元素的方法有三种: 1. del命令 使用del命令能够删除列表中指定位置上的元素,也可以删除整个列表. 2. pop( )方法 使用列表的pop()方法能够删除并返回列表指定位置(默认为最后一个位置)的元素. 3. remove方法 使用列表的remove()方法能够删除列表中首次出现的指定元素,如果列表中不存在该元素则抛出异常.有的时候可能需要删除列表中某一大量重复的数据,我们很容易就会想到列表的remove()方法,例如: x=[1,2,1,2,1,2,1,2] y=[1,1,2

  • Android仿微信列表滑动删除 如何实现滑动列表SwipeListView

    接上一篇,本篇主要讲如何实现滑动列表SwipeListView. 上篇完成了滑动控件SwipeItemView,这个控件是一个自定义的ViewGroup,作为列表的一个item,为列表提供一些方法让这个SwipeItemView能滑动其视图内容,同时滑动过程中会有顺滑的动画效果.而本篇讲的SwipeListView则是这个列表的具体实现了.当然啦,这个SwipeListView继承自ListView,为了实现我们需要的功能,重点就是重写ListView的onTouchEvent()以及onInt

  • 详解Android中实现ListView左右滑动删除条目的方法

    使用Scroller实现绚丽的ListView左右滑动删除Item效果 这里来给大家带来使用Scroller的小例子,同时也能用来帮助初步解除的读者更加熟悉的掌握Scroller的使用,掌握好了Scroller的使用我们就能实现很多滑动的效果.例如侧滑菜单,launcher,ListView的下拉刷新等等效果,我今天实现的是ListView的item的左右滑动删除item的效果,现在很多朋友看到这个效果应该是在Android的通知栏下拉中看到这个滑动删除的效果吧,我看到这个效果是在我之前的三星手

  • python中对列表的删除和添加方法详解

    目录 删除 1.pop(index) 2.remove(item) 3.dellist[index] 4.clear() 添加 1.append(obj) 2.extend(obj) 3.insert(index,obj) 总结 删除 1.pop(index) 删除列表中指定索引处的元素,默认删除列表中最后一个元素,返回删除值. list1 = [1, 2, 3, 5, 8, '3'] print(list1.pop(3)) print(list1) print(list1.pop()) pri

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

随机推荐