现在我们去到 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 实现列表滑动删除按钮的方法，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: