內(nèi)褲總動員之ionic -卡片布局和數(shù)據(jù)的調用方法

各位觀眾老爺大家好,歡迎收看內(nèi)褲總動員之程序猿的IT程序大講堂,書接上文兢卵,這次給大家來分享的是關于ionic中CSS文檔當中的卡片布局和數(shù)據(jù)的調用書寫方式。



首先呢先給大家看一下我寫的一個效果圖啊


完成版效果圖

在這里啊,我們先看一下這個布局在ionic中的CSS文檔的哪里?

這塊布局來此CSS文檔當中的卡片展現(xiàn)。


卡片展現(xiàn)

復制過來后潦蝇,贊帖到我們的項目中的home.html中。


拷貝過來

但是呢這里深寥,有一些地方需要修改攘乒,首先我的效果上面寫著好評論榜。所以關于上面我只留下了一個h2就完事了翩迈。?

下面的布局當中 我在中間有加了一個東西持灰。


指定列寬

這個類名就是指定了當前的div的寬度盔夜。所以我把div設置了百分之50的寬度负饲。分一行兩個布局。

所以我的代碼就成了這樣了喂链。


50%

我把這個制定列寬加入中間后返十,我接下來就該創(chuàng)造數(shù)據(jù)了。

而這回呢椭微,我創(chuàng)造數(shù)據(jù)洞坑,我從server.js中創(chuàng)造數(shù)據(jù)。簡稱叫工廠方法蝇率。

這里呢我簡單的說一下吧迟杂。?

這幾個文件的大體意思就是這個意思。 app.js是文件路徑的地方本慕,server.js是數(shù)據(jù)的地方,controller.js是 控制器的地方排拷。

文件說明

現(xiàn)在我們要去server.js去創(chuàng)建我們的數(shù)據(jù)。


二維數(shù)據(jù)

在這里呢锅尘,我創(chuàng)建的跟下面的數(shù)據(jù)一樣监氢。

都是用.factory()的方式創(chuàng)建。

然后起了一個名字叫“neiKuHomeGoodlist”。然后呢后面呢就是一個回調函數(shù)浪腐。返回我們的數(shù)據(jù)纵揍。

現(xiàn)在創(chuàng)建了數(shù)據(jù),我們需要從controller.js中去訪問我們的數(shù)據(jù)议街。


訪問數(shù)據(jù)

現(xiàn)在我們數(shù)據(jù)創(chuàng)建完成了泽谨,控制器也訪問數(shù)據(jù)了,接下來我們就可以在home.html中遍歷我們這個數(shù)據(jù)了傍睹。


遍歷數(shù)據(jù)


這樣隔盛,運行瀏覽器后,就可以瀏覽我們的效果咯拾稳。

對啦吮炕,關于你們運行后或許圖片有點大或者格式串格了。 寫一下CSS 代碼 調整一下就哦了访得。



好啦龙亲,關于ionic中的卡片布局和數(shù)據(jù)的調用方法就簡單的給大家介紹到這里了啊。感謝各位觀眾老爺?shù)膶忛喓芬郑缬袉栴}可以踴躍的跟我撕逼哦鳄炉。下期再見咯!~~~~~

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搜骡,一起剝皮案震驚了整個濱河市拂盯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌记靡,老刑警劉巖谈竿,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異摸吠,居然都是意外死亡空凸,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門寸痢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來呀洲,“玉大人,你說我怎么就攤上這事啼止〉蓝海” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵献烦,是天一觀的道長滓窍。 經(jīng)常有香客問我,道長仿荆,這世上最難降的妖魔是什么贰您? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任坏平,我火速辦了婚禮,結果婚禮上锦亦,老公的妹妹穿的比我還像新娘舶替。我一直安慰自己,他們只是感情好杠园,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布顾瞪。 她就那樣靜靜地躺著,像睡著了一般抛蚁。 火紅的嫁衣襯著肌膚如雪陈醒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天瞧甩,我揣著相機與錄音钉跷,去河邊找鬼。 笑死肚逸,一個胖子當著我的面吹牛爷辙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播朦促,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼膝晾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了务冕?” 一聲冷哼從身側響起血当,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎禀忆,沒想到半個月后臊旭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡油湖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年巍扛,在試婚紗的時候發(fā)現(xiàn)自己被綠了领跛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乏德。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖吠昭,靈堂內(nèi)的尸體忽然破棺而出喊括,到底是詐尸還是另有隱情,我是刑警寧澤矢棚,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布郑什,位于F島的核電站,受9級特大地震影響蒲肋,放射性物質發(fā)生泄漏蘑拯。R本人自食惡果不足惜钝满,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望申窘。 院中可真熱鬧弯蚜,春花似錦、人聲如沸剃法。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贷洲。三九已至收厨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間优构,已是汗流浹背诵叁。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钦椭,地道東北人黎休。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像玉凯,于是被迫代替她去往敵國和親势腮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,732評論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案漫仆? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,734評論 1 92
  • 各位觀眾老爺大家好,歡迎收看內(nèi)褲總動員之程序猿的IT程序大講堂,今天給大家根據(jù)上次的分享內(nèi)容捎拯,ionic中輸入欄的...
    5034af144007閱讀 588評論 0 2
  • 無戒365訓練營極限挑戰(zhàn)第13天 人物的巨大轉變對于故事是否好看的重要性在于,它讓一個角色擁有了兩面或者多面的形象...
    揚菁閱讀 674評論 0 1
  • 你穿上鳳冠霞衣,我將眉目掩去, 大紅的幔布扯開了一出折子戲. 你演的不是自己,我卻投入情緒, 弦索胡琴不能免俗的是...
    吾心如初閱讀 270評論 0 4