ionic 中的传参 跳转 及表单的使用方法 以及生命周期(lifecycle) 和滚动ionScroll
来源:互联网 发布:莫言 推荐 知乎 编辑:程序博客网 时间:2024/06/06 07:33
一、refresher
下拉刷新
①指定一个对应的组件标签
在ion-content的第一个子元素
<ion-refresher>
<ion-refresher-content
refreshingSpinner="dots"
refreshingText="正在获取数据中"
pullingIcon=""
pullingText="">
</ion-refresher-content>
</ion-refresher>
②指定下拉刷新要执行的操作
<ion-refresher (ionRefresh)="doRefresh()">
</ion-refresher>
③结束掉刷新动作
第一步:在触发ionRefresh事件的处理函数,指定$event作为参数
doRefresh($event)
第二步:调用complete方法
doRefresh(refresher){
refresher.complete();
}
上拉加载更多
①调用
在ionContent的最后一个子元素的位置调用
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="dots"
loadingText="正在加载更多"
>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
②绑定事件
<ion-infinite-scroll
(ionInfinite)="loadMore($event)"
>
</ion-infintie-scroll>
③结束加载更多的刷新动作
loadMore(infinite){
infinite.complete();
}
二、tabs
tabs在ionic中 主要是用来实现页面底部的导航效果
指定一个容器
demo14-tabs
创建两个page
demo15-first-tab
demo16-second-tab
指定tabs,可以点击不同的tab,加载不同的页面
<ion-tabs>
<ion-tab tabTitle="" tabIcon=""></ion-tab>
<ion-tab></ion-tab>
<ion-tab></ion-tab>
</ion-tabs>
总结:
ion-refresher 下拉刷新
①第一个子元素位置
②(ionRefresh)=“doRefresh($event)”
③ doRefresh(refresher){
refresher.complete()
}
ion-inifinite-scroll 上拉加载更多
①最后一个子元素位置
②(ionInfiniteh)=“loadMore($event)”
③ loadMore(infinite){
infinite.complete()
}
ion-tabs 标签页(可以在页面底部充当导航条使用)
①创建容器
②创建要用到的子页面
③将子页面和容器中tab绑定
<ion-tabs>
<ion-tab [root]="tab1"></ion-tab>
</ion-tabs>
Forms/Navigation
三、Forms
checkbox/radio/select/textarea/....
Ionic在实现表单的时候,不需要使用form本身这个标签,是通过list来实现的。
表达的基本结构:
<ion-list>
<ion-item>
</ion-item>
</ion-list>
常见标签:
ion-checkbox
ion-radio
ion-select
ion-toggle
ion-range
ion-label stacked/floating
ion-input
四、Navigation
ionic中page之间的跳转,是有个完善的机制,是通过入栈出栈的方式来控制前进和后退。
1、如何来进行跳转
①js方式去跳转:
实现步骤:
①import {NavController} from 'ionic-angular'
②实例化
constructor(public navCtrl:NavController){
}
③跳转
第一步
import {DestinationPage} from '**'
第二步
this.navCtrl.push(
DestinationPage)
②属性方式去跳转
① import {DestinantionPage} from '**'
② 在组件类中定义一个变量并进行赋值
myDestionation:any;
constructor(){
this.myDestination = DestionationPage;
}
③ 直接通过属性绑定,将myDestionation绑定给navPush
<button [navPush]="myDestionation">
</button>
2、参数传递
①明确发送 、接收方
②配置接收方的路由地址(可选)
③接收参数
④发送参数
从demo18中,获取输入框中的值 并发送给demo19
①明确发送 、接收方
②接收参数
③发送参数
实现方式:
①跳转的同时,发送参数
this.navCtrl.push(
DestinationPage,
{myKey:myValue}
)
<button
[navPush]="myDestination"
[navParams]="{userName:uName}">
</button>
②接收参数
第一步:
import {NavParams} from 'ionic-angular'
constructor(
public navParams:NavParams
){}
第二步:
this.navParams.data.myKey;
下拉刷新
①指定一个对应的组件标签
在ion-content的第一个子元素
<ion-refresher>
<ion-refresher-content
refreshingSpinner="dots"
refreshingText="正在获取数据中"
pullingIcon=""
pullingText="">
</ion-refresher-content>
</ion-refresher>
②指定下拉刷新要执行的操作
<ion-refresher (ionRefresh)="doRefresh()">
</ion-refresher>
③结束掉刷新动作
第一步:在触发ionRefresh事件的处理函数,指定$event作为参数
doRefresh($event)
第二步:调用complete方法
doRefresh(refresher){
refresher.complete();
}
上拉加载更多
①调用
在ionContent的最后一个子元素的位置调用
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="dots"
loadingText="正在加载更多"
>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
②绑定事件
<ion-infinite-scroll
(ionInfinite)="loadMore($event)"
>
</ion-infintie-scroll>
③结束加载更多的刷新动作
loadMore(infinite){
infinite.complete();
}
二、tabs
tabs在ionic中 主要是用来实现页面底部的导航效果
指定一个容器
demo14-tabs
创建两个page
demo15-first-tab
demo16-second-tab
指定tabs,可以点击不同的tab,加载不同的页面
<ion-tabs>
<ion-tab tabTitle="" tabIcon=""></ion-tab>
<ion-tab></ion-tab>
<ion-tab></ion-tab>
</ion-tabs>
总结:
ion-refresher 下拉刷新
①第一个子元素位置
②(ionRefresh)=“doRefresh($event)”
③ doRefresh(refresher){
refresher.complete()
}
ion-inifinite-scroll 上拉加载更多
①最后一个子元素位置
②(ionInfiniteh)=“loadMore($event)”
③ loadMore(infinite){
infinite.complete()
}
ion-tabs 标签页(可以在页面底部充当导航条使用)
①创建容器
②创建要用到的子页面
③将子页面和容器中tab绑定
<ion-tabs>
<ion-tab [root]="tab1"></ion-tab>
</ion-tabs>
Forms/Navigation
三、Forms
checkbox/radio/select/textarea/....
Ionic在实现表单的时候,不需要使用form本身这个标签,是通过list来实现的。
表达的基本结构:
<ion-list>
<ion-item>
</ion-item>
</ion-list>
常见标签:
ion-checkbox
ion-radio
ion-select
ion-toggle
ion-range
ion-label stacked/floating
ion-input
四、Navigation
ionic中page之间的跳转,是有个完善的机制,是通过入栈出栈的方式来控制前进和后退。
1、如何来进行跳转
①js方式去跳转:
实现步骤:
①import {NavController} from 'ionic-angular'
②实例化
constructor(public navCtrl:NavController){
}
③跳转
第一步
import {DestinationPage} from '**'
第二步
this.navCtrl.push(
DestinationPage)
②属性方式去跳转
① import {DestinantionPage} from '**'
② 在组件类中定义一个变量并进行赋值
myDestionation:any;
constructor(){
this.myDestination = DestionationPage;
}
③ 直接通过属性绑定,将myDestionation绑定给navPush
<button [navPush]="myDestionation">
</button>
2、参数传递
①明确发送 、接收方
②配置接收方的路由地址(可选)
③接收参数
④发送参数
从demo18中,获取输入框中的值 并发送给demo19
①明确发送 、接收方
②接收参数
③发送参数
实现方式:
①跳转的同时,发送参数
this.navCtrl.push(
DestinationPage,
{myKey:myValue}
)
<button
[navPush]="myDestination"
[navParams]="{userName:uName}">
</button>
②接收参数
第一步:
import {NavParams} from 'ionic-angular'
constructor(
public navParams:NavParams
){}
第二步:
this.navParams.data.myKey;
this.navParams.get('myKey')
五、lifecycle
ionViewDidLoad
ionViewCanEnter
ionViewCanLeave
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ionViewWillUnLoad
六、ionScroll
滚动区域,允许横向或者纵向滚动
<ion-scroll style="height:200px;white-space:nowrap"
scrollX="true">
<any style="display:inline-block"></any>
</ion-scroll>
阅读全文
0 0
- ionic 中的传参 跳转 及表单的使用方法 以及生命周期(lifecycle) 和滚动ionScroll
- spring中的lifeCycle(生命周期)
- 掌握Activity 的生命周期(Lifecycle)
- 活动的生命周期<LifeCycle>
- BindService的生命周期以及使用方法。
- Lifecycle(生命周期)和Phase(阶段)
- JavaScript (定时器控件实现图片的 滚动 以及JavaScript实现跳转和关闭窗口)
- Ionic中的$ionicModal使用方法
- Tomcat组件的生命周期Lifecycle
- 活动的生命周期(Activity Lifecycle)
- React Component Lifecycle(生命周期)
- React Component Lifecycle(生命周期)
- Android中“活动(Activity)的生命周期(lifeCycle)”
- React中文教程 - Component Lifecycle(组件的生命周期)
- Tomcat 8(九)解读Tomcat组件的生命周期(Lifecycle)
- Tomcat 8(九)解读Tomcat组件的生命周期(Lifecycle)
- (三)Managing the Activity Lifecycle管理activity的生命周期
- Ionic页面的生命周期
- 【工具使用】ZoomIt使用方法
- Eclipse通过HibernateTools实现逆向生成Hibernate实体类或映射
- pyCharm最新2018激活码
- 阿里技术行 | Apache RocketMQ 深圳沙龙报名开启!
- Spring 缓存机制
- ionic 中的传参 跳转 及表单的使用方法 以及生命周期(lifecycle) 和滚动ionScroll
- chrome 插件安装位置
- android 关于 clipToPadding 和 clipChildren区别和作用
- ASP.NET Mail发送邮件方法Encoding.GetEncoding(936)转码总表
- 关于java集合(3)-ArrayList和LinkedList的区别
- net.sf.json.JsonConfig 首字母转换为小写
- 监听剪切板内容,解决复制粘贴内容格式错乱
- 清新脱俗的sql
- 一种Java分割字符串的方法