ion-content
Ionic4项目中我们可以使用Ionic4内容组件ion-content对项目进行布局。 ion-content官方文档地址:https://ionicframework.com/docs/api/contentContent component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component.
ion-content 用法(Usage)
<ion-content
[scrollion-content 事件(Events)]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
ion-content>
<ion-content>ion-content>
var content = document.querySelector('ion-content');
content.scrollion-content 事件(Events) = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
import React from 'react';
import { IonContent } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonContent
scrollion-content 事件(Events)={true}
onIonScrollStart={() => {}}
onIonScroll={() => {}}
onIonScrollEnd={() => {}}>
IonContent>
);
export default Example;
<template>
<ion-content
:scrollion-content 事件(Events)="true"
@ionScrollStart="logScrollStart()"
@ionScroll="logScrolling($event)"
@ionScrollEnd="logScrollEnd()">
ion-content>
template>
ion-content 属性(Properties)
color | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
forceOverscroll | |
Description | If |
Attribute | force-overscroll |
Type | boolean | undefined |
fullscreen | |
Description | If |
Attribute | fullscreen |
Type | boolean |
Default | false |
scrollion-content 事件(Events) | |
Description | Because of performance reasons, ionScroll events are disabled by default, in order to enable them
and start listening from (ionScroll), set this property to |
Attribute | scroll-events |
Type | boolean |
Default | false |
scrollX | |
Description | If you want to enable the content scrolling in the X axis, set this property to |
Attribute | scroll-x |
Type | boolean |
Default | false |
scrollY | |
Description | If you want to disable the content scrolling in the Y axis, set this property to |
Attribute | scroll-y |
Type | boolean |
Default | true |
ion-content 事件(Events)
Name | Description |
---|---|
ionScroll | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollion-content 事件(Events)` |
ionScrollEnd | Emitted when the scroll has ended. |
ionScrollStart | Emitted when the scroll has started. |
ion-content 内置方法(Methods)
getScrollElement | |
---|---|
Description | Get the element where the actual scrolling takes place.
This element can be used to subscribe to i.e. Using |
Signature | getScrollElement() => Promise |
scrollByPoint | |
Description | Scroll by a specified X/Y distance in the component. |
Signature | scrollByPoint(x: number, y: number, duration: number) => Promise |
scrollToBottom | |
Description | Scroll to the bottom of the component. |
Signature | scrollToBottom(duration?: number) => Promise |
scrollToPoint | |
Description | Scroll to a specified X/Y location in the component. |
Signature | scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise |
scrollToTop | |
Description | Scroll to the top of the component. |
Signature | scrollToTop(duration?: number) => Promise |
ion-content中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the Content |
--color | Color of the Content |
--keyboard-offset | Keyboard offset of the Content |
--offset-bottom | Offset bottom of the Content |
--offset-top | Offset top of the Content |
--padding-bottom | Padding bottom of the Content |
--padding-end | Padding end of the Content |
--padding-start | Padding start of the Content |
--padding-top | Padding top of the Content |
Slots
Name | Description |
---|---|
Content is placed in the scrollable area if provided without a slot. | |
"fixed" | Should be used for fixed content that should not scroll. |