這幾天搬家,沒空寫,這是前幾天寫的,放在草稿箱中忘記發了。
本節課緊跟上節課的内容。沒看過的朋友能夠先看一下上節課。
太多的前言我就不寫了。直接開始正題吧。
我們要做的是一個這種Banner。

首先建立熱門的相關檔案。
www/js/contrololers檔案夾下建立HotGameCtrl.js
www/js/services檔案夾下建立HotGameService.js
www/templates檔案夾下建立hotGame.html
把HotGameService加到services檔案中面。
第四課裡面改過了按需載入controller檔案。
是以HotGameCtrl一樣的處理方式處理。
然後在route裡面配置熱門遊戲。
HotGameService.js
這裡我們須要一組banner的資料,是以我們想服務發起請求。
我們僅僅管發起請求。控制器不做資料處理。
這個過程我在第八課中說的非常清楚了。另一張非常醜的圖。
1、擷取資料和資料處理都在服務這裡完畢
2、從大的資料中取出我們須要的資料組成一個新的小對象,再把小對象傳遞給控制器,這裡涉及到性能優化問題。
在做資料查詢是非常多背景都會把一整行的資料庫内容取出來傳給前端,但事實上有些資料我們未必有須要。是以這裡能夠多做一步處理。
優點非常明顯,在ng-repeat的時候小對象的解析明顯優于大對象。
缺點就是改動需求的時候。這裡的代碼也要維護,添加了人工維護成本。
不了解的能夠直接deferred.resolve(resData)也能夠
3、要注意的是我們傳回的是那個小資料。
hotGame.html
這裡定義一個slide-box ,這裡我僅僅設定了一個自己主動播放的屬性。
同意屬性例如以下:
上面有一個參數說明是錯誤的。does-continue 表示是否循環。auto-play才是是否自己主動滑動。
執行程式:
發現banner的圖檔太大了,依據上節課說的調試方法。改動一下圖檔樣式就能夠了。
這裡有幾點要說的
1、banner一般都相應了動作事件,能夠在<img >标簽裡面使用ng-click綁定事件
2、在把值賦給banner時。記得調用$ionicSlideBoxDelegate.update()有時候banner總是莫名其妙的沒掉,就是少了這個更新。特别是使用ne-repeat的時候。
改動後的代碼:
ion-slide-box須要注意的地方還是挺多的。并且這些地方沒處理好的話,也沒有報錯,banner直接不出現,剛開始接觸的時候真的有點頭大的。
這裡再介紹一種活用ion-slide-box的方法,就是相當于把ion-slide的内容替換成一個頁面。
實作例如以下:
執行界面:
介于部落格篇幅問題,我這裡就不具體展開講這個slide-tabs。
但事實上這個是非常實用的,在挺多項目中都實用到這種功能。
後面假設有朋友感興趣的,我再另發一個部落格說明。
請大家關注一下我的公衆号。就算給我一點點鼓舞吧
假設你還有什麼其它的問題,能夠通過下面方式找到我