各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家根据上次的分享内容，ionic中输入栏的使用方法和轮播图。
首先看一下关于ionic中文文档中的输入框的一种。
ionic中文官网
这个是ionic中文官网，点击CSS文档中，我们首先用一下这个表单中的这个嵌入式表单。
直接复制其中代码到我们的文件中， 我起了一个名字叫home的html文件中。
home。html
然后我在其中加入了一个img图片，然后button标签中的类名中，我也加入一个按钮图片。
左边的图片和按钮图片
然后左边的图片，外面的div有一个名字就是home_head_people，然后我创建了一个css文件，加入样式。
home。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 是如何使用的。
home.html
这里呢，有点跟我们的菜鸟教程中的案例有点一样了。 使用 ng-repat 方式 进行访问便利 我们的imgs的数据名称。 然后 下面的img的访问数据的方式就是x.imgsrc 了 请看一下我的保存数据和这个访问方式就哦了。
好了，关于轮播图的使用方式就简单的为大家介绍到这里了啊，如有问题可以踊跃的联系我哦。
我会激情满满的告诉你的。 撒有哪啦~~~~~~~~~~~~~~~~~
网友评论