内裤总动员之ionic -卡片布局和数据的调用方法

各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,书接上文，这次给大家来分享的是关于ionic中CSS文档当中的卡片布局和数据的调用书写方式。

---

首先呢先给大家看一下我写的一个效果图啊

完成版效果图

---

在这里啊，我们先看一下这个布局在ionic中的CSS文档的哪里？

这块布局来此CSS文档当中的卡片展现。

卡片展现

---

复制过来后，赞帖到我们的项目中的home.html中。

拷贝过来

但是呢这里，有一些地方需要修改，首先我的效果上面写着好评论榜。所以关于上面我只留下了一个h2就完事了。 

下面的布局当中 我在中间有加了一个东西。

指定列宽

这个类名就是指定了当前的div的宽度。所以我把div设置了百分之50的宽度。分一行两个布局。

所以我的代码就成了这样了。

50%

我把这个制定列宽加入中间后，我接下来就该创造数据了。

而这回呢，我创造数据，我从server.js中创造数据。简称叫工厂方法。

这里呢我简单的说一下吧。 

这几个文件的大体意思就是这个意思。 app.js是文件路径的地方，server.js是数据的地方,controller.js是 控制器的地方。

文件说明

现在我们要去server.js去创建我们的数据。

二维数据

在这里呢，我创建的跟下面的数据一样。

都是用.factory（）的方式创建。

然后起了一个名字叫“neiKuHomeGoodlist”。然后呢后面呢就是一个回调函数。返回我们的数据。

现在创建了数据，我们需要从controller.js中去访问我们的数据。

访问数据

---

现在我们数据创建完成了，控制器也访问数据了，接下来我们就可以在home.html中遍历我们这个数据了。

遍历数据

---

这样，运行浏览器后，就可以浏览我们的效果咯。

对啦，关于你们运行后或许图片有点大或者格式串格了。 写一下CSS 代码 调整一下就哦了。

---

好啦，关于ionic中的卡片布局和数据的调用方法就简单的给大家介绍到这里了啊。感谢各位观众老爷的审阅，如有问题可以踊跃的跟我撕逼哦。下期再见咯！~~~~~