ionic 表格實現(xiàn)側(cè)滑刪除功能

1.界面準(zhǔn)備

 <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>
 <!--添加側(cè)滑選項-->
 <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. 控制器實現(xiàn)動作
deleteAction(param){
   console.log("第" + param + "行");
switch (param){
  // splice 函數(shù) (index,len,[item])  可用于替換/添加/刪除某個元素
        // index 開始的下標(biāo) 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;
}
 }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 翻譯自“View Controller Programming Guide for iOS”。 1 彈出視圖控制器...
    lakerszhy閱讀 3,784評論 2 20
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,064評論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,385評論 4 61
  • 數(shù)載風(fēng)雨肩上挑,從未有怨把家拋。 兒女闖禍悉心教,事事操心都周到。 您似陽光把我照,我卻不是您驕傲。 請父莫為兒心...
    佛笑來人閱讀 236評論 0 0
  • 小時候,我常伏在窗口癡想 山那邊是什么呢? 媽媽給我說過:海 哦,山那邊是海嗎? 于是,懷著一種隱秘的想望 有一天...
    Pengvv閱讀 537評論 0 0

友情鏈接更多精彩內(nèi)容