ion-content

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4内容组件ion-content对项目进行布局。ion-content中有ionic ion-content 用法(Usage) ,ionic ion-content 属性(Properties) ,ionic ion-content 事件(Events) ,ionic ion-content 内置方法(Methods) ,ionic ion-content 中的CSS 自定义属性等

Content 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)

angular javascript
<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'));

ion-content 属性(Properties)

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

forceOverscroll

Description

If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.

Attribute force-overscroll
Type boolean | undefined

fullscreen

Description

If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.

Attribute fullscreen
Type boolean

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 true.

Attribute scroll-events
Type boolean

scrollX

Description

If you want to enable the content scrolling in the X axis, set this property to true.

Attribute scroll-x
Type boolean

scrollY

Description

If you want to disable the content scrolling in the Y axis, set this property to false.

Attribute scroll-y
Type boolean

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

Returns the element where the actual scrolling takes places. This element is the one you could subscribe to scroll events or manually modify scrollTop, however, it's recommended to use the API provided by ion-content:

Ie. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.

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