99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

使用Ionic 2怎么實(shí)現(xiàn)一個(gè)列表滑動(dòng)刪除按鈕？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)巢湖免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.創(chuàng)建Ionic2應(yīng)用

通過以下命令行語句創(chuàng)建新的Ionic2應(yīng)用：

ionic start ionic2-delete blank --v2

這里我使用了–v2標(biāo)志位，為了告訴Ionic命令行我們創(chuàng)建的是Ionic2項(xiàng)目。

2.準(zhǔn)備列表數(shù)據(jù)

我們需要一些維護(hù)數(shù)據(jù)，因此要建立一些試驗(yàn)數(shù)據(jù)。創(chuàng)建我們項(xiàng)目的blank模版默認(rèn)建立了一個(gè)Home組件，這個(gè)教程我們就在此基礎(chǔ)上修改。

既然Ionic2還很新，我將這些步驟盡量闡述詳細(xì)，下面我們看看app/home/home.js文件：

import {Page} from 'ionic/ionic'

倫理片 http://www.dotdy.com/

@Page({
 templateUrl: 'app/home/home.html',
})
export class HomePage {
 constructor() {}
}

constructor 方法在組件創(chuàng)建是執(zhí)行，因此我們?cè)谶@里準(zhǔn)備試驗(yàn)數(shù)據(jù)。你可能已經(jīng)注意到我們已經(jīng)給這個(gè)組件定義了模版，隨后將展示如何在模版中使用在這里添加的數(shù)據(jù)。

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

現(xiàn)在我們有一些數(shù)據(jù)可以刪除了。

3.修改主頁（HOME）的模版

接下來我們編輯home.html來建立模版。現(xiàn)在的模版是包含一些創(chuàng)建的代碼，而我們要用來代替：

修改 home.html如下：

 
 Home
 


 
 
  I'm just a plain old item in a list...
 
 

這只是創(chuàng)建了只有一個(gè)單項(xiàng)的列表，接著我們將添加滑動(dòng)元素。

繼續(xù)修改home.html如下：

 
 Home
 


 
 
 
 Swipe me to the left
 
 
   Delete
 
 
 

通過上下對(duì)比，你應(yīng)該看到：我們用ion-item-sliding替換了ion-item 。這允許我們創(chuàng)建一個(gè)ion-item-options 部件，當(dāng)用戶滑動(dòng)列表元素時(shí)，它將顯示出來。

這段代碼還創(chuàng)建了一個(gè)刪除按鈕，當(dāng)ion-item-options部件顯示出來時(shí)，可以點(diǎn)擊按鈕，這時(shí)會(huì)觸發(fā)類中定義的removeItem （暫無，接下來添加）。另外，我們不止是一個(gè)單項(xiàng)，我們要為我們創(chuàng)建的數(shù)組的每一個(gè)數(shù)據(jù)創(chuàng)建滑動(dòng)項(xiàng)，這里我使用ng-for。
還是修改home.html如下：

 
 Home
 


 
 
 
 {{item.title}}
 
 
   Delete
 
 
 

現(xiàn)在我們循環(huán)在類中定義的items數(shù)組的每個(gè)item項(xiàng)，然后為每個(gè)項(xiàng)創(chuàng)建一個(gè) ion-item-sliding指令。注意我們使用的是#item而不是item。這將創(chuàng)建一個(gè)本地引用到迭代獲得的item，這讓我們可以使用 { {item.title} } 輸出標(biāo)題，它還允許我們傳遞item的引用到我們的 removeItem 函數(shù)。

我們現(xiàn)在有了一個(gè)列表包含所有數(shù)據(jù)，用戶可以滑動(dòng)并顯示出一個(gè)delete按鈕。現(xiàn)在剩下的是當(dāng)用戶點(diǎn)擊時(shí)做點(diǎn)什么事。因此我們?cè)O(shè)置一個(gè)簡單監(jiān)聽以便調(diào)用方法從我們先前創(chuàng)建的測(cè)試數(shù)據(jù)中刪除一項(xiàng)。

4.創(chuàng)建方法刪除數(shù)據(jù)

現(xiàn)在我們?nèi)サ?home.js 文件編寫方法處理數(shù)據(jù)刪除。當(dāng)前但刪除按鈕被點(diǎn)擊時(shí)傳送一個(gè)數(shù)據(jù)項(xiàng)給 removeItem。類似的，你可以非常容易的實(shí)現(xiàn)例如刪除、編輯、分享、播放動(dòng)畫等你需要的東西，不僅是刪除。

修改 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);
  }
 }
 }
}

現(xiàn)在你向左側(cè)滑動(dòng)列表項(xiàng)，然后點(diǎn)擊刪除按鈕，它就會(huì)從列表中刪除。就像下面這樣：

刪除例子

5.添加一個(gè)編輯按鈕

這里將不會(huì)將Edit按鈕的全過程走一遍，但是你可以輕易擴(kuò)展活動(dòng)項(xiàng)并添加編輯按鈕，如下所示：

 Edit
  Delete

現(xiàn)在滑動(dòng)時(shí)你有兩個(gè)按鈕了，看下面：

看完上述內(nèi)容，你們掌握使用Ionic 2怎么實(shí)現(xiàn)一個(gè)列表滑動(dòng)刪除按鈕的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：使用Ionic2怎么實(shí)現(xiàn)一個(gè)列表滑動(dòng)刪除按鈕
當(dāng)前URL：http://www.ef60e0e.cn/article/ieseoc.html