组件内部示例
<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() {
//组件销毁
}
}