组件内部示例

<ion-header>
<ion-toolbar>
<ion-title>条件筛选</ion-title>
<ion-buttons slot="end">
<ion-button (click)="cancel()">
<ion-icon name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="searchfiltrate">
<div class="box_01-list">
<div class="box_01">
<h4 class="box_tp">主題</h4>
<ol class="box_bt">
<li class="l0_ active">全部主題</li><li class="l0_">跨領域設計</li><li class="l0_">傳統工藝</li><li class="l0_">創意產品設計</li>
</ol>
</div>
<div class="box_01">
<h4 class="box_tp">年級</h4>
<ol class="box_bt">
<li class="l0_ active">全部年級</li><li class="l0_">一年級</li><li class="l0_">二年級</li><li class="l0_">三年級</li>
<li class="l0_">四年級</li><li class="l0_">五年級</li><li class="l0_">六年級</li><li class="l0_">七年級</li>
<li class="l0_">八年級</li><li class="l0_">九年級</li><li class="l0_">高一</li><li class="l0_">高二</li>
<li class="l0_">高三</li>
</ol>
</div>
<div class="box_01">
<h4 class="box_tp">收費情況</h4>
<ol class="box_bt">
<li class="l0_ active">全部</li><li class="l0_">免費</li><li class="l0_">收費</li>
</ol>
</div>
</div>
<div class="btn_box">
<span class="btn_">清空筛选</span>
<span class="btn_ sure-btn" (click)="ok()">确定</span>
</div>
</ion-content>
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular'; @Component({
selector: 'app-searchmodal',
templateUrl: './searchmodal.page.html',
styleUrls: ['./searchmodal.page.scss']
})
export class SearchmodalPage implements OnInit {
public searchfiltrate = ['000'];
constructor(public modalController: ModalController,public navParams: NavParams) {
//this.navParams 通过这个获取父页面的传值
console.log(this.navParams);
} ngOnInit() {}
cancel() {//取消
this.modalController.dismiss({
result: 'modal_cancel'
});
}
ok() {//确定
this.modalController.dismiss({
result: this.searchfiltrate
});
}
}

  调用示例:

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll, ModalController } from '@ionic/angular';
import { Router } from '@angular/router';
import { SearchmodalPage } from '../module/searchmodal/searchmodal.page'; @Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
public list = [];
public total = 30; //总条数
public pageindex = 0; //页数
public pageSize = 10; //每页条数
public hasMore = false; //是否显示更多数据
public searchobj = {roleText:null,subjectText:null}
constructor(public router: Router, public modalController: ModalController) {}
ngOnInit(): void {
this.getData(this.pageindex); //页面初始化的时候加载数据
}
searchchange(msg){ //接收子组件的搜索参数
console.log(msg)
}
searchfiltrate(msg){ //子组件传递参数执行父组件的方法
console.log(msg)
if(msg)this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
showBackdrop:true,
component: SearchmodalPage,
componentProps: { value: 123 }
});
await modal.present();
//监听销毁的事件
const { modalData } = await modal.onDidDismiss(); //获取关闭传回的值
console.log(modalData);
}
doRefresh(event) { //下拉刷新
this.pageindex = 0;
setTimeout(() => {
this.list = [];
for (let i = 0; i < (this.pageindex + 1) * this.pageSize; i++) {
this.list.push(i);
}
event.target.complete();
this.hasMore = false;
}, 500);
}
loadData(event) {
//加载更多数据
setTimeout(() => {
this.pageindex = this.pageindex + 1;
this.getData(event); //加载更多数据
this.infiniteScroll.complete();
}, 500);
}
getData(event) {
//加载更多数据
let start = this.pageindex * this.pageSize;
let end = (this.pageindex + 1) * this.pageSize;
if (end > this.total) {
end = this.total;
}
for (let i = start; i < end; i++) {
this.list.push(i);
}
if (this.list.length == this.total) {
this.hasMore = true;
//this.infiniteScroll.disabled = true;
}
}
todetails(obj) {
this.router.navigate(['/details'], { queryParams: obj });
}
ngOnDestroy() {
//组件销毁
}
}

  

ionic4 ion-modal的用法的更多相关文章

  1. Ionic4.x Modal模态对话框以及 Modal 传值

    1.Modal 模态对话框简介 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出 ...

  2. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

  3. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  4. iPad开发--iPad中modal的更多用法

    可以设置modal的呈现样式,常见的有以下四种                                   设置modal的过度样式,也就是展现时候的动画效果 代码示例

  5. ionic4 ion-picker用法

    ion-picker实际开发中肯定多处使用,所以封装成服务的形式调用 新建picker.service服务模块   ionic g service picker import { Injectable ...

  6. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  7. iOS开发——高级篇——iPad开发、iPad开发中的modal

    一.iPad简介 1.什么是iPad一款苹果公司于2010年发布的平板电脑定位介于苹果的智能手机iPhone和笔记本电脑产品之间跟iPhone一样,搭载的是iOS操作系统 2.iPhone和iPadi ...

  8. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  9. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

随机推荐

  1. 201871010109-胡欢欢《面向对象程序设计(java)》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. 【转】Cookie和Session和Cache

    1 Cookie和Session Cookie和Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决HTTP无状态的问题而所做的努力. Session可以用Cookie来实 ...

  3. BZOJ1391/LG4177 「CEOI2008」order 最大权闭合子图

    问题描述 BZOJ1391 LG4177 题解 最大权闭合子图,本质是最小割 在任务和机器中间的边之前权值设为INF,代表不可违背这条规则 本题的租借就相当于允许付出一定代价,违背某个规则,只需要把中 ...

  4. Python连载52-SOCKET编程示例

    一.UDP编程 1.客户端Client:发起访问的一方. 2.服务器端 3.server段编程 (1)建立socket,socket是负责具体通信的一个实例 (2)绑定,为创建的socket指派固定的 ...

  5. C++ day01-C++的函数和对象

    C++的函数和对象 1.1 1 混合型语言 c++以.cpp为文件扩展名,有且只有一个名为main的主函数,因保留了这个面向过程的主函数,所以被称为混合语言 2 注释方式 . C++的注释方式有两种, ...

  6. MySQL for OPS 11:优化

    写在前面的话 不管是作为运维还是作为 DBA,我们的工作都不是写 SQL,搞业务.更多的还是如何实现又好又快的给开发提供一个数据库环境和保障数据的安全性.前面的文章中读写分离,高可用,建立索引,分库分 ...

  7. wpf listview images

    <ListView x:Name="lv"> <ListView.ItemsPanel> <ItemsPanelTemplate> <St ...

  8. Ubuntu 安装最新版nodejs

    转自:ubuntu快速安装最新版nodejs,只需2步 第一步,去 nodejs 官网 https://nodejs.org 看最新的版本号: 也就是说此时此刻,12.6.0 是最新的版本,不过你求稳 ...

  9. java基础(9):类、封装

    1. 面向对象 1.1 理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式. 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. 例 ...

  10. C#在循环中使用Random时生成的随机数相同的解决办法

    场景 在循环中使用 Random y = new Random(); 生成随机数时每次循环生成的数是一样的. ; i < ;i++ ) { Random y = new Random(); Po ...