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

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



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


完成版效果圖

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

這塊布局來(lái)此CSS文檔當(dāng)中的卡片展現(xiàn)。


卡片展現(xiàn)

復(fù)制過(guò)來(lái)后,贊帖到我們的項(xiàng)目中的home.html中。


拷貝過(guò)來(lái)

但是呢這里,有一些地方需要修改,首先我的效果上面寫著好評(píng)論榜。所以關(guān)于上面我只留下了一個(gè)h2就完事了。?

下面的布局當(dāng)中 我在中間有加了一個(gè)東西。


指定列寬

這個(gè)類名就是指定了當(dāng)前的div的寬度。所以我把div設(shè)置了百分之50的寬度。分一行兩個(gè)布局。

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


50%

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

而這回呢,我創(chuàng)造數(shù)據(jù),我從server.js中創(chuàng)造數(shù)據(jù)。簡(jiǎn)稱叫工廠方法。

這里呢我簡(jiǎn)單的說(shuō)一下吧。?

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

文件說(shuō)明

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


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

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

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

然后起了一個(gè)名字叫“neiKuHomeGoodlist”。然后呢后面呢就是一個(gè)回調(diào)函數(shù)。返回我們的數(shù)據(jù)。

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


訪問(wèn)數(shù)據(jù)

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


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


這樣,運(yùn)行瀏覽器后,就可以瀏覽我們的效果咯。

對(duì)啦,關(guān)于你們運(yùn)行后或許圖片有點(diǎn)大或者格式串格了。 寫一下CSS 代碼 調(diào)整一下就哦了。



好啦,關(guān)于ionic中的卡片布局和數(shù)據(jù)的調(diào)用方法就簡(jiǎn)單的給大家介紹到這里了啊。感謝各位觀眾老爺?shù)膶忛?,如有?wèn)題可以踴躍的跟我撕逼哦。下期再見(jiàn)咯!~~~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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

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