内裤总动员之ionic输入栏和轮播图的使用方法

各位观众老爷大家好,欢迎收看内裤总动员之程序猿的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 了     请看一下我的保存数据和这个访问方式就哦了。


好了,关于轮播图的使用方式就简单的为大家介绍到这里了啊,如有问题可以踊跃的联系我哦。

我会激情满满的告诉你的。 撒有哪啦~~~~~~~~~~~~~~~~~


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容