ionic4 ion-modal的用法
组件内部示例
<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的用法的更多相关文章
- Ionic4.x Modal模态对话框以及 Modal 传值
1.Modal 模态对话框简介 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出 ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
- JavaScript插件——模态框
Bootstrap3.0学习第十七轮(JavaScript插件——模态框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...
- iPad开发--iPad中modal的更多用法
可以设置modal的呈现样式,常见的有以下四种 设置modal的过度样式,也就是展现时候的动画效果 代码示例
- ionic4 ion-picker用法
ion-picker实际开发中肯定多处使用,所以封装成服务的形式调用 新建picker.service服务模块 ionic g service picker import { Injectable ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- iOS开发——高级篇——iPad开发、iPad开发中的modal
一.iPad简介 1.什么是iPad一款苹果公司于2010年发布的平板电脑定位介于苹果的智能手机iPhone和笔记本电脑产品之间跟iPhone一样,搭载的是iOS操作系统 2.iPhone和iPadi ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
随机推荐
- 算法问题实战策略 SORTGAME
地址 https://algospot.com/judge/problem/read/SORTGAME 解答 常规BFS是会超时的 按照书上的提示 应该是打表(居然还有提倡打表的题目) tle 代码 ...
- Python:程序练习题(二)
Python:程序练习题(二) 2.1温度转换程序. 代码如下: t=input("请输入带符号的温度值(如:32C):") if t[-1] in ["C", ...
- Django3.0 前瞻 支持异步通信
最近两年,Django的版本号提升得特别快,2.0还没有多久,很快就要到3.0了. 让我们先看看官方的路线图和时间表: 版本号 发布日期 停止更新日期 停止维护日期 3.0 2019-12 2020- ...
- IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义之美.人性之美.简单之美.实用之美……如同一场革命,它的主要应用场景是浏览器,不 ...
- H5混合应用之上下文切换
一.native/web/hybrid 简介 目前主流应用程序大体分为:Native App(原生应用).Web App(网页应用).Hybrid App(混合应用),它们三者的优缺点比较如下表: 应 ...
- 创 PHP RSA2 签名算法
什么是RSA2 ? RSA2 是在原来SHA1WithRSA签名算法的基础上,新增了支持SHA256WithRSA的签名算法. 该算法比SHA1WithRSA有更强的安全能力. 为了您的应用安 ...
- EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks
增加模型精度的方法有增加网络的深度,特征图的通道数以及分辨率(如下图a-d所示).这篇文章研究了模型缩放,发现仔细平衡网络的深度.宽度和分辨率可以获得更好的性能(下图e).在此基础上,提出了一种新的缩 ...
- Maven的assembly插件在linux启动卡住Starting the localhost.localdomain
1.今天在测试assembly的时候,在Linux虚拟机,内存配置为512mb,然后开始在Linux上运行assembly的时候就会一直卡住 2.停止运行后,查看了下日志 [root@localho ...
- C#中巧用Lambda表达式实现对象list进行截取
场景 有一个对象的list,每个对象有唯一的属性Id,并且是从1递增,现在要根据此Id属性进行截取. 其中DataTreeNode 实现 Global.Instance.PrepareCompareD ...
- git安装和项目上传到GitHub
重装系统后,Git安装也要来重来 下载 国内下载地址:https://npm.taobao.org/mirrors/git-for-windows 安装忽略 生成密钥 输入然后都是下一步,生成密钥,生 ...