各位观众老爷大家好,欢迎收看内裤总动员之程序猿的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中的卡片布局和数据的调用方法就简单的给大家介绍到这里了啊。感谢各位观众老爷的审阅，如有问题可以踊跃的跟我撕逼哦。下期再见咯！~~~~~
网友评论