美文网首页
ionic 表格实现侧滑删除功能

ionic 表格实现侧滑删除功能

作者: 133sheiya | 来源:发表于2017-10-24 09:36 被阅读129次

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

    相关文章

      网友评论

          本文标题:ionic 表格实现侧滑删除功能

          本文链接:https://www.haomeiwen.com/subject/zmctpxtx.html