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文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容