ionic使用过程记录 2019-07-01

轮播图

使用轮播图方法

    <ion-slides pager autoplay=2000 loop>
        <ion-slide>
            <img src="" alt="">
        </ion-slide>
    </ion-slides>

pager:是否分页(就是轮播图下部的第几张的显示)
autoplay:autoplay值是number,自动播放功能(默认值是null,不自动翻页)设置值之后按值播放下一张单位毫秒,自动循环
effect:轮播图翻页动画,默认值是”slide”,其他值有:slide,fade(渐隐),cube(3D旋转),coverflow(3D卡片),flip(3D翻转) 由于3D动画效果不太好所以只推荐使用默认或者fade效果
loop:控制轮播图是否循环,默认false，设置成true,就会无限循环
speed:每次轮播到下一张的用时默认300
spaceBetween:每个slide之间的距离,默认值为0

Toast底部消息弹窗如何使用

使用Toast方法

在使用Toast弹窗的ts中调用ToastController模块

    import {ToastController} from 'ionic-angular';

并且在下面constructor中完成Toast模块的实例化private toastCtrl:ToastController

使用方法

    var myToast=this.toastCtrl.create({
        message:`Toast信息`,
        duration:2000, //持续时间，单位是毫秒
        showCloseButton:true, //是否显示按钮(不是必须填)
        closeButtonText:'关闭' //按钮显示的文本(不是必须填)
    })
    myToast.present()

HTTP通信如何使用

使用HTTP方法

在使用HTTP网络通信ts中调用HTTP模块
import {HttpClient} from '@angular/common/http'
并且在下面constructor中完成HTTP模块的实例化private myHttp:HttpClient

  this.myHttp.get(url).subscribe((result:any)=>{
      console.log(result) //result是一个对象
    })

Constructor理解因本文只是使用记录所以不涉及原理解释，对于Constructor实例化相关，推荐看一下这篇文章

navPush

使用navPush方法

1.在需要跳转的标签内写上navPush</br>
<ion-item [navPush]="detail">

2.navPush表示你要跳转的那个组件，再次之前你要在ts中声明，例子如下:</br>
detail=DetailPage;//我要使用在navPush中使用detail那么就要在ts中声明

3.引申:还可以使用[navParams]进行参数传递</br>
<ion-item [navPush]="detail" [navParams]="id:1">//在对应跳转的ts中需要声明传进的值
this.id = this.navParams.get('id')//在对应跳转的ts中的ionViewDidLoad中添加这条代码意思是在生命周期开始就放到内存中
ps:因为在这条ts中定义了id值即this.id

ionic ng文档

最后编辑于：2019.07.01 19:56:26