ionic 表格实现侧滑删除功能

1.界面准备

 <ion-list>

<ion-item-sliding *ngFor=" let item of dataArr;let i = index">

 <ion-item (click)="itemClick(item)" >
 <ion-label>{{item}}</ion-label>
 <ion-note item-end>{{i}}</ion-note>
 </ion-item>
 <!--添加侧滑选项-->
 <ion-item-options>
   <button ion-button>编辑</button>
   <button ion-button color="danger" (click)="deleteAction(i)" >删除</button>
</ion-item-options>

 </ion-item-sliding>

  </ion-list>
  1. 控制器实现动作
deleteAction(param){
   console.log("第" + param + "行");
switch (param){
  // splice 函数 (index,len,[item])  可用于替换/添加/删除某个元素
        // index 开始的下标 len 替换 删除的长度   item:替换的值,删除操作的话 item为空

  case 0:this.dataArr.splice(0,1);break;
  case 1:this.dataArr.splice(1,1);break;
  case 2:this.dataArr.splice(2,1);break;
  default: break;
}
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 翻译自“View Controller Programming Guide for iOS”。 1 弹出视图控制器...
    lakerszhy阅读 9,059评论 2 20
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,637评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,745评论 4 61
  • 数载风雨肩上挑,从未有怨把家抛。 儿女闯祸悉心教,事事操心都周到。 您似阳光把我照,我却不是您骄傲。 请父莫为儿心...
    佛笑来人阅读 1,580评论 0 0
  • 小时候,我常伏在窗口痴想 山那边是什么呢? 妈妈给我说过:海 哦,山那边是海吗? 于是,怀着一种隐秘的想望 有一天...
    Pengvv阅读 3,430评论 0 0

友情链接更多精彩内容