ionic入門教程第十一課-簡要說明ion-list、ion-item自動完成清單頁ion-infinite-scroll上拉載入ion-refresher下拉重新整理

標籤：

發了十篇教程，現在向我問問題的朋友越來越少了。可能我接觸到的學習ionic的就這麼些人吧！

可能大家已經覺得我寫的東西都太過基礎了，沒什麼值得參考借鑒的地方。

開始有人叫我說直接防類似餓了嗎，折八百這樣的網站，做一個Demo。

其實我也知道有些朋友就想要這種網上的免費勞動力。

但是其實這個建議還是不錯的。

等我把現在這個demo講完，我可能會考慮找一個成熟的上線的項目進行說明。

這個列表頁一說，寫完這個的朋友就可以嘗試著接手項目了。

我不是說ionic簡單，內容少。

我只是說我這些時間裡面提到的內容已經足夠入門了。

後續的學習還是要從項目中開始會比較科學。

其實我講的都有些多了，關於基礎中的基礎，無非就是MVC，服務控制器視圖之間如何互動，如何雙向繫結，如何使用ionic標籤，如何遍曆數組。

言歸正傳，開始我們今天的課程吧。

首先我們看一下這節課要實現的功能：

我們要做的是中這樣的列表頁，首先簡單分析我們就能知道，列表頁裡面的子項都是一樣的樣式，只不過資料有差別而已。

所以我們這裡只要編寫一個子項的樣式，然後通過使用ng-repeat進行迴圈遍曆資料數組，就等得到我們想要的列表頁。

通過分析這個子項，我們能夠知道這東西大致由三個部分組成，

左邊的圖片，中間的文本說明地區，右邊的按鈕。

查閱ionic的itemAPI，我們找到這樣一個樣式

圖片來自：http://www.fed123.com/2014/08/09/2014_ionic_api_css/ 

還是我上次講的原則，能用ionic的樣式就先用ionic的樣式，能少敲一行代碼，就少敲一行。

從伺服器擷取資料這個就不說了，前面說了很多了。

基本上沒敲什麼代碼，就完成了大半了，現在再加入一個按鈕

這樣基本所有的功能就都有了，然後根據，對css做部分的微調。

然後在

這個相當於是for(var key in items){這裡是a標籤包含的所有html，都會被複製 }

恩，介面跟我們要的不一樣，所以手動修改吧，這裡貼代碼了，直接看Demo吧。

接下來，我們來看比較常見的，列表頁附加需求，上拉載入、下拉重新整理。

這兩個功能現在都是預設必須有的，產品經理在寫需求時都懶得寫到需求文檔裡面的。

只要提到列表頁，一定要有這兩個功能。恩，有些固定內容的列表頁並不需要，當我胡扯的。

先說上拉載入：這個是放在</ion-content>之前的，也就是介面的最下面

<ion-infinite-scroll on-infinite="loadMore()" distance="1%" ng-if="!noMore"></ion-infinite-scroll>

ng-if是指這個控制項的顯示或隱藏。

這裡要注意和ng-show的區別，ng-show和ng-hide是使用css的方法顯示和隱藏控制項，實際是還存在的。ng-if則是移除和添加。這個是有本質上的區別的在實際情況下，要根據業務的需要進行選擇，如果需要重複高頻的顯示隱藏可以考慮使用ng-show，如果隱藏之後不再需要顯示則最好使用ng-if

distance是指當滑塊（就是捲軸的那個滑塊，不顯示還是存在的）距離底部多少的時候觸發事件。

on-infinite是指綁定的觸發事件。

值得注意的是，這個事件要在處理完響應之後，拋出scroll.infiniteScrollComplete事件

這裡擴充說明一下;

$emit只能向parent controller傳遞event與data$broadcast只能向child controller傳遞event與data$on用於接收event與data

詳細的可以參考:http://www.tuicool.com/articles/qIBNve 我這裡不在重複了。

下拉重新整理用的是

<ion-refresher pulling-text="下拉重新整理..." on-refresh="doRefresh()"></ion-refresher>
注意這個是放在<ion-content >之後的，也就是介面的最上面。注意和上拉載入的區別

注意這裡在事件響應結束的時候，要拋出scroll.refreshComplete事件，和上拉載入的事件是不一樣的。

到此這節課的內容就結束了。

項目Demo地址：http://pan.baidu.com/s/1c2a48E0
如果你還有什麼其他的問題,可以通過以下方式找到我
QQ:448627663
E-mail:448627663
新浪微博:小虎Oni
公眾號:ionic__

ionic入門教程第十一課-簡要說明ion-list、ion-item自動完成清單頁ion-infinite-scroll上拉載入ion-refresher下拉重新整理