ionic基础组件使用：ion-grid组件

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;
}

展示效果：