Ionic内容content _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, 如下所示：

ionScrollStart：滚动开始时发出。
ionScrollEnd：滚动结束时发出。
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应用程序时, 它将在你的浏览器中显示以下屏幕。