ionic4.x 学习笔记（三）—— Ionic4.x 中的 JavaScript 扩展、手势相关事件、Modal 传值、上拉加载和下拉更新

最新推荐文章于 2023-08-24 11:06:12 发布

Lyrelion

最新推荐文章于 2023-08-24 11:06:12 发布

阅读量414

点赞数

分类专栏： ionic 文章标签： ionic angular

本文链接：https://blog.csdn.net/Lyrelion/article/details/109285996

版权

ionic 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

目录

一.Ionic4.x 中的 JavaScript 扩展

1.1 ActionSheet

1.2 Alert

1.3 Toast

1.4 Loading

二.Ionic4.x 中的手势相关事件

三.Modal 以及 Modal 传值

四.上拉加载和下拉更新

4.1 ion-infinite-scroll 上拉加载

4.2 结合 api 实现上拉加载

4.3 ion-refresher 下拉更新

一.Ionic4.x 中的 JavaScript 扩展

1.1 ActionSheet

官方文档：https://ionicframework.com/docs/api/action-sheet
<ion-button (click)="showAction()"> 弹出 ActionSheet </ion-button>
mode:'ios', /* 修改 action 的平台 */
 async showAction() {
    const actionSheet = await this.actionSheetController.create({
      header: '我是 actionsheet 的标题',
      mode:'ios',   /* 修改 action 的平台 */
      buttons: [{
        text: '删除',
        role: 'destructive',
        icon: 'trash',  
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: '分享',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }}]
    });
    await actionSheet.present();
  }
1.2 Alert

官方文档：https://ionicframework.com/docs/api/alert
点击确定，获取表单的值：
buttons: [{
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
                console.log('Confirm Cancel');
            }}, {
        text: 'Ok',
        handler: () => {
            console.log('Confirm Ok');
        }}]
1.3 Toast

官方文档：https://ionicframework.com/docs/api/toast
自定义 css样式，把 css 放在 variables.scss / global.scss 中
 async presentToast() {
    const toast = await this.toastController.create({
      message: '登录成功',
      duration: 2000,
      position: 'middle',
      color:'dark',
      cssClass:'mytoast'    /* cssClass必须写在全局 */
    });
    toast.present();
  }
1.4 Loading

官方文档：https://ionicframework.com/docs/api/loading

二.Ionic4.x 中的手势相关事件

ionic4.x 中的 gestures 手势事件包括：tap、press、pan、swipe、rotate、and pinch events 等
官方文档：http://www.ionic.wang/article-index-id-155.html

首先需要安装 hammerjs：npm install hammerjs --save
在项目的 src/main.ts 中引入hammerjs：import 'hammerjs';
在项目中使用：<ion-button (press)="doPress()">
长按触发的事件
</ion-button>
<ion-button (tap)="doTap()">
点击触发的事件
</ion-button>

如果未来的 ionic 版本可以直接使用手势事件的话，忽略上面的安装引入过程
问题：点击空白，自定义的弹框消失的解决方法？—— 加上 backdropDismiss:false 属性
  async doPress(){
    const alert = await this.alertController.create({
      backdropDismiss: false,
      header: '提示',
      message: '确定要删除吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: '确定',
          handler: () => {
            console.log('Confirm Okay');
          }
        }]
    });
    await alert.present();
  }

Modal 模态对话框主要用于登录注册页面，可以把它理解为：从页面底部弹出的另一个页面
→
新建 model 页面，并在 model 页面下新建一个组件：

ng generate page model
ng generate component model/components/login

在 model 页面所在的 ts 中，引入并声明上面创建的 login 组件：
注意：entryComponents:[LoginComponent]，这个需要手动加一下

// 引入 login 组件 
import { LoginComponent} from './components/login/login.component';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    declarations: [ModelPage,LoginComponent], // 声明 login 组件
    entryComponents: [LoginComponent] // 需要自行手动添加
})

在 modal 页面所在的组件中，引入 login 组件，并且引入 ModalController 弹出模态对话框模块：
modal 页面在 componentProps 中，给弹出的 login 组件页面传值

import { Component, OnInit } from '@angular/core';
// 弹出模态对话框模块
import { ModalController } from '@ionic/angular';
// 引入登录组件
import { LoginComponent } from '../components/login/login.component';
// ...
export class ModalPage implements OnInit {
    // 声明弹出模态对话框的模块
    constructor(public modalController: ModalController) {}
    ngOnInit() {
    }
    async presentModal() {
        const modal = await this.modalController.create({
            showBackdrop: true,
            component: LoginComponent,
            // modal 页面在 componentProps 中，给弹出的组件页面传值
            componentProps: { value: 123 }
        });
        return await modal.present();
    }}

弹出的 login 组件页面通过 NavParams 模块接受 modal 页面的传值：

import { Component, OnInit,Input } from '@angular/core';
// 接受 model传值的模块
import { NavParams } from '@ionic/angular';

export class LoginComponent implements OnInit {
    // 接受输入值
    @Input() aid: any;
    // 声明 接受 model传值的模块
    constructor(public navParams: NavParams) {
        console.log(this.navParams);
    }
    ngOnInit() {
    }
    // Login 组件关闭的时候传入数据
    closeModel(){
        this.navParams.data.modal.dismiss({
            'result': '消失的时候返回的内容'
        });
    }}

弹出的 login 组件页面关闭时，给 modal 页面传值，modal 监听关闭事件：

async showModel(){
    const modal = await this.modalController.create({
        component: LoginComponent,
        componentProps: { aid: '123' }
    });
    await modal.present();
    // 监听销毁的事件
    const { data } = await modal.onDidDismiss();
    console.log(data);
}

四.上拉加载和下拉更新

4.1 ion-infinite-scroll 上拉加载

ion-infinite-scroll 加载完成一次后，需要调用 更新数据 的方法：event.target.complete();
禁用 ion-infinite-scroll 法一：event.target.disabled = true;
禁用 ion-infinite-scroll 法二：
@ViewChild('infinite') myInfinite;
this.myInfinite.disabled=true;

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of data">
            {{item}}
        </ion-item>
    </ion-list>
    <ion-infinite-scroll #myInfiniteScroll threshold="100px" (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

——————————————————————————————————————————————————————————————————————————

export class Tab2Page {
    @ViewChild('myInfiniteScroll') infiniteScroll: IonInfiniteScroll;
    public data:any[] = [];
    constructor() {
        for(var i=0;i<20;i++){
            this.data.push(`这是第${i}条数据`);
        }
    }
    loadData(event) {
        setTimeout(() => {
            for(var i=0;i<10;i++){
                this.data.push(`这是第${i}条数据`);
            }
            console.log('Done');
            event.target.complete();
            if (this.data.length == 1000) {
                event.target.disabled = true;
            }
        }, 500);
    }
    toggleInfiniteScroll() {
        this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
    }
}

4.2 结合 api 实现上拉加载

// 封装 httpservice 服务：
export class HttpserviceService {
  constructor(public http:HttpClient) { }
  get(api){
    return new Promise((resolve,reject)=>{
        this.http.get(api).subscribe((response)=>{
          resolve(response);
        },(err)=>{
          reject(err);          
        })})
  }}

<ion-infinite-scroll threshold="10%" (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="加载中...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

<p *ngIf="!hasMore">---我是有底线的---</p>

export class Tab1Page {
 public list:any[] = [];
 public page:any = 1;
 public hasMore = true;

 constructor(public httpService:HttpserviceService){ } 

 ngOnInit(): void {    
     this.loadMore(null);
 }

 loadMore(e){
    var api='http://www.../appapi.phpa=getPortalList&catid=20&page='+this.page;
      this.httpService.get(api).then((response:any) => {
          console.log(response)
          this.list = this.list.concat(response.result);
          ++this.page;
          // 判断下一页有没有数据
          if(response.result.length < 20){
            e ? e.target.disabled=true : '';
            this.hasMore = false;
          }
          // 请求完成数据后告诉 ion-infinite-scroll 更新数据
          e ? e.target.complete() : ''; 
      })
  }}

4.3 ion-refresher 下拉更新

<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
                pullingIcon="arrow-dropdown"
                pullingText="Pull to refresh"
                refreshingSpinner="circles"
                refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
</ion-content>

 export class RefresherExample {
    constructor() {}
    doRefresh(event) {
        console.log('Begin async operation');
        setTimeout(() => {
            console.log('Async operation has ended');
            event.target.complete();
        }, 2000);
    }}