Ionic内容content

Ionic框架提供了一个<ion-content>元素, 该元素用作包装我们要在应用程序中创建的所有其他元素的容器。内容组件允许使用易于使用的内容区域, 其中包含一些有用的方法来控制可滚动区域。在Ionic应用程序中, 单个视图中应该只有一个内容组件。可以使用CSS实用程序中提供的全局样式自定义包含许多其他Ionic组件的内容, 以修改其填充, 边距等。你还可以使用CSS和可用的CSS自定义属性通过单独的样式对其进行自定义。

例

<ion-header>
    <ion-toolbar>
      <ion-title>
        Ion Content
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content>
    <div>
      <p>Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. It allows developers to build once and run everywhere.</p>
    </div>
    <div>
        <p>It was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.</p>
      </div>
  </ion-content>

输出量

Ionic内容content滚动的示例

如果要使用Ionic内容content滚动事件, 则需要通过设置[scrollEvents] =“ true”来启用滚动事件。

主要有三个滚动事件可用于Ionic内容content, 如下所示：

1. ionScrollStart：滚动开始时发出。
2. ionScrollEnd：滚动结束时发出。
3. ionScroll：在滚动时发出。默认情况下, 它是禁用的。

从以下示例中我们可以了解Ionic内容content的滚动。

Home.page.html

<ion-header>
    <ion-toolbar>
      <ion-title>
        Ion Content Scroll
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content
    [scrollEvents]="true"
    (ionScrollStart)="logScrollStart()"
    (ionScroll)="logScrolling($event)"
    (ionScrollEnd)="logScrollEnd()"
  >
    <ion-button (click)="ScrollToBottom()">
      Scroll To Bottom
    </ion-button>
   
    <ion-button (click)="ScrollToPoint(300, 120)">
      Scroll To Point Left
    </ion-button>
   
    <ion-list>
      <ion-item *ngFor="let item of dummyList">
        <ion-label>{{ item.value }}</ion-label>
      </ion-item>
    </ion-list>
   
    <div style="height: 50px;width:600px;" text-right>
      <ion-button (click)="ScrollToPoint(-300, -120)">
        Scroll To Point Right
      </ion-button>
    </div>
   
    <ion-button (click)="ScrollToTop()">
      Scroll To Top
    </ion-button>
  </ion-content>

Home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonContent, } from '@ionic/angular';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  @ViewChild(IonContent, {static: false}) content: IonContent;
  dummyList: any;

  constructor(
  ) {
    this.dummyList = [
      {
        value: 'Himanshu', }, {
        value: 'Anubhav', }, {
        value: 'Abhishek', }, {
        value: 'Akshita', }, {
        value: 'Haseena', }, {
        value: 'Anubhav', }, {
        value: 'Harshita', }, {
        value: 'Anisha', }, {
        value: 'Haseena', }, {
        value: 'Anubhav', }, {
        value: 'Abhishek', }, {
        value: 'Anisha', }, {
        value: 'Haseena', }, {
        value: 'Akshita', }, {
        value: 'Abhishek', }, {
        value: 'Akshita', }, {
        value: 'Jyotika', }, {
        value: 'Anubhav', }, {
        value: 'Abhishek', }, {
        value: 'Anisha', }, {
        value: 'Haseena', }, {
        value: 'Anubhav', }, {
        value: 'Abhishek', }
    ];
  }
  logScrollStart() {
    console.log('logScrollStart : When Scroll Starts');
  }

  logScrolling() {
    console.log('logScrolling : When Scrolling');
  }

  logScrollEnd() {
    console.log('logScrollEnd : When Scroll Ends');
  }

  ScrollToBottom() {
    this.content.scrollToBottom(1500);
  }

  ScrollToTop() {
    this.content.scrollToTop(1500);
  }

  ScrollToPoint(X, Y) {
    this.content.scrollToPoint(X, Y, 1500);
  }
}

输出量

当你执行上面的Ionic应用程序时, 它将在你的浏览器中显示以下屏幕。

现在, 如果你单击“滚动到底部”按钮, 你将立即进入屏幕底部, 在下面的屏幕中可以看到。接下来, 当你单击“滚动到顶部”按钮时, 你将再次到达屏幕顶部, 我们可以在下图中看到。