一、Ionic常用组件之五------按钮
<ion-button color="主题色" size="small/large" expand="block/full" shape="round">
文字
<ion-icon name="" slot="start/end/icon-only"></ion-icon>
</ion-button>
2.Ionic常用组件之六-----输入框
最简单的没有边框的输入框
<ion-input type="" placeholder="" maxlength="" ></ion-input>
带下边框和标签文字的输入框:
<ion-item>
<ion-label position="fixed/stacked/floating">标签文字</ion-label>
<ion-input [(ngModel)] ="userInput"></ion-input>
</ion-item>
3.Ionic常用组件之七-----搜索框
<ion-searchbar placeholder="" (ngModelChange)="doChange()"></ion-searchbar>
4.Ionic常用组件之八------卡片(ion-card)
<ion-card>
<img>
<ion-card-header>
ion-card-title + ion-card-subtitle
</ion-card-header>
<ion-card-content></ion-card-content>
</ion-card>
<ion-card>
<ion-item></ion-item>
......
<ion-item></ion-item>
</ion-card>
5.Ionic常用组件之九-----轮播广告(ion-slides)
<ion-slides #myAd3>
<ion-slide>文字或图片</ion-slide>
........
<ion-slide>文字或图片</ion-slide>
<ion-slides>
------------------------------------------------
@viewChild('myAd3',{static:false})
private myAd3
ngOnInit(){
this.myAad3.startAutoplay() //开始自动播放
}
6.Ionic常用组件之九------列表项(ion-item)
提示：只要见到了“有下划线的组件”，就想到列表项
<ion-item detail="true' href="#" color="">
<ion-avatar/thumbnail slot="start" >img</ion-avatar/thumbnail>
<ion-label>文本/h2/h3/p</ion-label>
<ion-button slot="end">文字/图标</ion-button>
</ion-item>
7.Ionic常用组件之十--------列表
<ion-list>
<ion-item></ion-item>
.......
<ion-item></ion-item>
</ion-list>
8.Ionic常用组件之十一-------无限滚动(ion-infinite-scroll)-----有一点点难度
原理：在滚动条滚动到距离底部指定的“临界值(threshold)”时，立即触发特定的事件(ionlnfinite:"用户马上
就要看到底部了，请加载更多数据")，并显示出底部的“加载中”提示符号和文字。等到新的数据
加载完成(complete)了，再次隐藏"加载中"提示信息，等待用户继续滚动.....
<ion-infinite-scroll threshold="50px" (ionInfinite)="loadMore()" >
<ion-infinite-scroll-content loadingText="加载中..."
loadingSpinner="bubbles">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
----------------------------------------------------------------------------------------
loadMore(e){
...异步加载更多数据
e.target.complete()
}
9.Ionic常用组件之十二 -------弹出式窗口：ActionSheet/Alert/Modal
提示：这三个组件都没有对应的元素，都是通过XxxController动态创建出来的
constructor(private controller:AlertController){ }
doXxx(){
this.controller.create({
header:"标题字",
message:"提示信息",
buttons:["按钮1","按钮2"]
}).then((dialog)=>{
dialog.present() //呈现异步创建出来的对话框
})
}
| Angular路由系统 | Ionic | |
| 创建路由词典 |
//app.module.ts const routes = [ {path:'',component:...} ] |
一样的 |
| 注册路由词典 |
//app.module.ts imports: [BrowserModule, RouterModule.forRoot(routes)] |
一样的 |
| 路由出口 | <router-outlet></router-outlet> | <ion-router-outlet></ion-router-outlet> |
10.Ionic常用组件之十三------------标签式导航(ion-tabs)