https://ionicframework.com/docs/api/grid
示例:平分,加起来等于12分
组件的app.component.html文件:
示例:平分:加起来不等于12份
不平分:加起来等于12份
示例:如果不带size属性,则自动均分
示例:如果size的和加起来大于12份,则自动折行
综合案例:多列布局、上拉触底加载更多、下拉刷新
在app.module.ts文件中加载网络服务:
组件的app.component.ts文件:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { InfiniteScrollCustomEvent } from '@ionic/angular';
import { IonRefresherCustomEvent, RefresherEventDetail, IonInfiniteScrollCustomEvent } from '@ionic/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
url = 'http://localhost:8888/ka?_page='
res: Result = {
data: [],
first: 0,
items: 0,
last: 0,
next: 0,
pages: 0,
prev: 0
}
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.http.get<Result>(this.url + 1).subscribe(res => {
console.log(res)
this.res = res
})
}
loadData(e: IonInfiniteScrollCustomEvent<void>) {
let nextPage
if (this.res.next) {
nextPage = this.res.next
} else {
nextPage = this.res.next
}
this.http.get<Result>(this.url + nextPage).subscribe(res => {
res.data = this.res.data.concat(res.data)
this.res = res
e.target.complete()
})
}
doRefresh(e: IonRefresherCustomEvent<RefresherEventDetail>) {
this.http.get<Result>(this.url + 1).subscribe(res => {
this.res = res
e.target.complete()
})
}
}
interface Result {
data: ResultData[]
first: number
items: number
last: number
next: number
pages: number
prev: number
}
interface ResultData {
date: string
id: string
money: number
type: string
useFor: string
pic: string
}
组件的app.component.html文件:
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>grid 组件</ion-title>
</ion-toolbar>
</ion-header>
<ion-content *ngIf="res">
<!-- 下拉刷新 -->
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid fixed>
<ion-row>
<ion-col size="6" *ngFor="let item of res.data">
<ion-card>
<img src="{{ item.pic }}" alt="">
<ion-card-header>
<ion-card-title>{{ item.type }}</ion-card-title>
<ion-card-subtitle>{{ item.date }}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<div>{{ item.money }}</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<!-- 上拉触底加载更多数据 -->
<ion-infinite-scroll threshold="25%" [disabled]="res.next === null" position="bottom"
(ionInfinite)="loadData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-button disabled *ngIf="res.next === null" expand="full">没有更多数据了</ion-button>
</ion-content>
</ion-app>
组件的app.component.scss文件:
ion-card-header {
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 兼容性 */
line-clamp: 2;
/* 设置或者检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
ion-card {
padding: 0;
margin: 0;
}
ion-col {
padding: 2px;
}
ion-grid {
padding: 0;
}
ion-card-header {
padding: 3px;
}
展示效果: