各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家根据上次的分享内容,ionic中输入栏的使用方法和轮播图。
首先看一下关于ionic中文文档中的输入框的一种。
这个是ionic中文官网,点击CSS文档中,我们首先用一下这个表单中的这个嵌入式表单。
直接复制其中代码到我们的文件中, 我起了一个名字叫home的html文件中。
然后我在其中加入了一个img图片,然后button标签中的类名中,我也加入一个按钮图片。
然后左边的图片,外面的div有一个名字就是home_head_people,然后我创建了一个css文件,加入样式。
这个就是嵌入式表单。 前面的圆图片原来就是加入一个img标签,而后面的搜索图标是直接的一个类名。在ionic图标库中找到的。 在中文网中有ionic图库的名字。
现在就给大家说一下,关于ionic轮播图的使用方法。
点击ionic。js文档区域,找到滑动框,然后复制代码。
复制到home文件中,下面有各个APP解释。先不说这个啊。看看我的home文件的情况。
代码过来后,我在中间加入了3个img标签图片,然后在ion-slide-box 后加入 属性:
auto-play ="true" 自动滚动
slide-interval="1000" 1000毫秒滚动
does-continue 循环滚动
show-pager 是否显示轮播下面的那个按钮点点
官网解释的有点出入,妈蛋,我试了之后才知道。。。。
但是,这种方式不太方便,而且以后也不会这样写的,我们有一个东西,就是angular.js 这里面在菜鸟教程中有一个 循环方式特别方便。
在这里面,我如果详细的去解释里面的东西就太多了。
我就简单的说一下, x in records 有点像我哦们 js中的 那个forin 循环
便利我们js数组里面的数据。
而我们的数据存放的方式 在angular里面 除了数组就是对象的方式。
而我的存放方式为
这个数据我们写在了controlers 控制器中,如果你们看到我的第一章的话,你们应该知道,这个控制器和我们的这个home。html的连接方式啊。 最主要的路径控制app.js路径里面。 我通过app.js 路径控制 然后就导入到了我们这个controlers。js文件中。 数据就这样的存放下来了。
接下来我们在看一下home.html 是如何使用的。
这里呢,有点跟我们的菜鸟教程中的案例有点一样了。 使用 ng-repat 方式 进行访问便利 我们的imgs的数据名称。 然后 下面的img的访问数据的方式就是x.imgsrc 了 请看一下我的保存数据和这个访问方式就哦了。
好了,关于轮播图的使用方式就简单的为大家介绍到这里了啊,如有问题可以踊跃的联系我哦。
我会激情满满的告诉你的。 撒有哪啦~~~~~~~~~~~~~~~~~