一、Ionic常用组件之五------按钮
文字
2.Ionic常用组件之六-----输入框
最简单的没有边框的输入框
带下边框和标签文字的输入框:
3.Ionic常用组件之七-----搜索框
4.Ionic常用组件之八------卡片(ion-card)
ion-card-title + ion-card-subtitle
......
5.Ionic常用组件之九-----轮播广告(ion-slides)
........
------------------------------------------------
@viewChild('myAd3',{static:false})
private myAd3
ngOnInit(){
this.myAad3.startAutoplay() //开始自动播放
}
6.Ionic常用组件之九------列表项(ion-item)
提示：只要见到了“有下划线的组件”，就想到列表项
<ion-button slot="end">文字/图标
7.Ionic常用组件之十--------列表
.......
8.Ionic常用组件之十一-------无限滚动(ion-infinite-scroll)-----有一点点难度
原理：在滚动条滚动到距离底部指定的“临界值(threshold)”时，立即触发特定的事件(ionlnfinite:"用户马上
就要看到底部了，请加载更多数据")，并显示出底部的“加载中”提示符号和文字。等到新的数据
加载完成(complete)了，再次隐藏"加载中"提示信息，等待用户继续滚动.....
loadingSpinner="bubbles">
----------------------------------------------------------------------------------------
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)] |
一样的 |
| 路由出口 |
10.Ionic常用组件之十三------------标签式导航(ion-tabs)