06 2016 档案
摘要：老样子 贴代码 。 我把初始化项目的 list.html 改成了这个样子。简单分析一下 其实跟 ionic1 没什么两样 。 值得注意的就是 (infinite)="doInfinite($event)" 和 (refresh)="doRefresh($event)" 不过值得注意的是 他比ioni
阅读全文
摘要：1、导航视图 angular2 中的是视图是显示在<router-outlet></router-outlet>里的同时他要依赖于 directives:[ ROUTER_DIRECTIVES ]，还必须要配置RouteConfig 然而ionic 是这样的。 其中 swipeBackEnabled
阅读全文
摘要：1、单个侧边栏 导航的代码在分析源码的时候已经分析过了，下面只看他的一些应用与方法。 /* 示例代码 */ <ion-menu [content]="mycontent"> <ion-content> <ion-list> ... </ion-list> </ion-content> </ion-m
阅读全文
摘要：1、首先Modal是一个内容窗格、通常用来做一个选择或编辑。 先来看一下 tabs.html 做了什么。 /* tabs.html */ <ion-navbar *navbar hideBackButton> <ion-title>Modals</ion-title> </ion-navbar> <
阅读全文
摘要：/* html */ <ion-content> <button (click)="manual()">手动关闭</button> <button (click)="automatic()">自动关闭</button> </ion-content> /* html */ /* js */ impor
阅读全文
摘要：1、注意 pan 和 swipe 的区别 。 平移 与 滑动 1、pan 是当我 按住 dom 左右滑动不松手。pan 累加 2、而 swipe 是我 按住 dom 左右滑动松手之后 swipe 累加 2、注意 tab 与 press 的区别 。 点击 与 按住 1、tab 是 轻击 dom 触发方
阅读全文
摘要：1、只是弹出框 以下代码都用 page1.html 这样我们就创建好了一个弹出窗口。效果如下。 那么这样做的话应该只是 显示了一个展示效果。 如果我想在这个弹出框内 输入信息呢？可以这样做。 2、带有input的弹出框 看 紫色部分的 代码意思 就是创建了两个 input 然后 赋予两个 name
阅读全文
摘要：和 ionic1 的很像嘛。最终效果图。 点击后。其实就是handler方法。如图
阅读全文
摘要：首先 。这里的文件是 ts 而不是 js 具体看安装 我们的 幻灯片 Slide其实是一个 子集视图。所以我需要 import { ViewChild } from '@angular/core'。 首先 。这里的文件是 ts 而不是 js 具体看安装 我们的 幻灯片 Slide其实是一个 子集视图
阅读全文
摘要：！重点 multiple="true" 控制 选择框是 多选还是单选。true为 多选类似 checkbox。
阅读全文
摘要：还有更多的样式http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/
阅读全文
摘要：1、基本样式 no-lines 属性 隐藏列表项之间的分割符 inset 属性 去掉 ion-list的 外边框。 默认 的 ion-list 是有外边框的。 /* 示例代码 */ <ion-content> <ion-list no-lines> <ion-item>no-lines</ion-i
阅读全文
摘要：1、input ion-list中 的 inset 使最后一个 ion-item 不带分割线， 具体效果请尝试 。 2、radio
阅读全文
摘要：1、图标 当然可以使用 平台特定 图标 <ion-icon ios="logo-apple" md="logo-android"></ion-icon> 是 ios 的时候显示 ios的图标 ， 别的则显示 Android的图标 变量的图标： 使用一个变量设置一个图标： <ion-icon [nam
阅读全文
摘要：带有 warp 的 ion-row 超出界限( 100)时自动换到下一行。。而没有 warp 的 ion-row 是在同一行。。。 接下来看一下所有属性。 首先 可以去 theme/app.core.scss中导入 你的 scss 显式列百分比属性 显式列百分比属性 width-10 10% wid
阅读全文
摘要：1、多选框：ion-checkbox 2、时间选择框：ion-datetime
阅读全文
摘要：1、基本用法的使用 2、带有list多条信息的卡片。 用了 ion-list 还在 button上 加了 ion-item 使得这个button占据一整行。 3、带有图片的卡片 3、带有头像的卡片 这里可以看得出来 ion-item 里的 其实属于一个块级标签 。用里面的属性 item-lefft
阅读全文
摘要：2、不同形状的按钮 3、带有图标的 按钮 4、在别的组件上使用 按钮 上图中 ion-buttons 一个 是 start 一个是 end 可以很好的控制他们的先后顺序
阅读全文
摘要：因为ion-item 一般写于ion-list里 所以在ion-list里面我会仔细讲解。 1、 ion-badge ion-badge 也可以给予任何颜色属性 <ion-badge secondary item-right> 999 </ion-badge>
阅读全文
摘要：同理 在看 嵌套路由的时候 来分析一下 ionic2 默认生成的 tabs 项目。目录结构： child 目录是我新加的 因为这里是要做用来做嵌套路由的。 首先先看app.js 看完上一章 之后 就觉得没啥特别的嘛。看三个红色部分就知道了。 贴 tabs 代码。 这个 也没啥 可解释的。root 对
阅读全文
摘要：0、目录结构 1、看完上一章，一定会发现 路由消失了，这章看一下ionic的初始化项目的源码。 上述 app.js 中的红色部分是配置 侧边栏。红色部分中的黑色部分要和app.html中的红色部分的黑色部分对应上，这样才能告诉浏览器渲染的子页面 在 ion-nav(绿色部分)中显示。 之后再来解析一
阅读全文
摘要：我的代码中不太跑的通这些代码 所以我整理出来了 一键安装。 npm i process-nextick-args core-util-is util-deprecate brace-expansion inflight lru-cache sigmund ionic-gulp-sass-build
阅读全文
摘要：首先 ionic2 暂时找不到中文文档。本人英语又很渣。无奈之下只能依赖于百度翻译。完全是已自己理解的方式运作 ，可能里面会有一些偏差之类的 不过我都测试过代码是可以跑通的 只不过讲解的部分可能。。。。毕竟英语只有20多分的人。有不对的地方可以指出 共同学习。 Angular2 1、Angular2
阅读全文
摘要：1、没有嵌套路由 类似 ui-route 上述的html用红字标记的是必须导入的。这是因为：路由并不在ng2中，需要我们额外引入，另外我们需要设置base href，这是个什么东西呢？相当于我们后续所有url的“前缀”，因为我们的app默认是基于"HTML 5 pushState" 风格的路由，所以
阅读全文
摘要：1、 stateless pipe 2、stateful pipe
阅读全文
摘要：1、Attribute directives 2、directive的理解
阅读全文
摘要：angular2借鉴了。http://www.cnblogs.com/lewis617/p/5191007.html 导入了自己的思维方式 1、基本属性 2、*语法与template标签 3、组件的嵌套 4、消失的controller
阅读全文
