版本：v7

ion-content

内容组件提供了一个易于使用的内容区域，并带有一些控制可滚动区域的有用方法。单个视图中只应存在一个内容组件。

与许多其他 Ionic 组件一样，可以通过 CSS 实用工具中提供的全局样式自定义内容的填充、边距等，或使用 CSS 和可用的 CSS 自定义属性单独设置样式。

基本用法

页眉与页脚

内容组件可以是页面中唯一的顶层组件，也可以与页眉、页脚或两者结合使用。当与页眉或页脚一起使用时，它会自动调整大小以填充剩余高度。

全屏内容

默认情况下，内容填充在页眉和页脚之间的空间，但不会延伸到它们后面。在某些情况下，可能希望内容滚动到页眉和页脚后面，例如当其中任何一个设置了 translucent 属性，或在工具栏上设置了 opacity 时。这可以通过将内容组件的 fullscreen 属性设置为 true 来实现。

固定内容

要将元素放置在可滚动区域之外，请将它们分配到 fixed 插槽。这样做会将元素绝对定位到内容的左上角。要更改元素的位置，可以使用 top、right、bottom 和 left CSS 属性进行样式设置。

滚动方法

内容组件提供了可调用的方法，用于将内容滚动到底部、顶部或特定点。可以向这些方法传递 duration 参数，以实现平滑过渡而不是瞬间改变位置。

滚动事件

出于性能考虑，内容组件的滚动事件默认是禁用的。但是，可以通过将 scrollEvents 设置为 true 来启用。在监听任何滚动事件之前，必须先启用此选项。

Console

Console messages will appear here when logged from the example above.

主题定制

颜色

CSS Shadow Parts

CSS 自定义属性

安全区域填充

内容组件不会自动向其任何一侧应用填充以考虑安全区域。这是因为内容组件通常与自身应用填充的其他组件（如页眉和页脚）结合使用。但是，如果内容组件单独使用，则可能需要对安全区域应用填充。这可以通过 CSS 使用应用变量中描述的 --ion-safe-area-(dir) 变量来实现。

最常见的用例是向内容顶部应用填充以考虑状态栏。这可以通过将 padding-top 属性设置为 --ion-safe-area-top 变量的值来实现。

ion-content::part(scroll) {
  padding-top: var(--ion-safe-area-top, 0);
}

另一个常见用例是当设备处于横屏模式且刘海在左侧时，向内容左侧应用填充以考虑刘海。这可以通过将 padding-left 属性设置为 --ion-safe-area-left 变量的值来实现。

ion-content::part(scroll) {
  padding-left: var(--ion-safe-area-left, 0);
}

接口

ScrollBaseDetail

interface ScrollBaseDetail {
  isScrolling: boolean;
}

ScrollDetail

interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
  scrollTop: number;
  scrollLeft: number;
}

ScrollBaseCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，以便为 ionScrollStart 和 ionScrollEnd 事件提供更强的类型检查。

interface ScrollBaseCustomEvent extends CustomEvent {
  detail: ScrollBaseDetail;
  target: HTMLIonContentElement;
}

ScrollCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，以便为 ionScroll 事件提供更强的类型检查。

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

属性

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	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`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, this does not disable the system bounce on iOS. That is an OS level setting.
Attribute	`force-overscroll`
Type	`boolean ｜ undefined`
Default	`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`
Default	`false`

scrollEvents

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`
Default	`false`

scrollX

Description	If you want to enable the content scrolling in the X axis, set this property to `true`.
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 `false`.
Attribute	`scroll-y`
Type	`boolean`
Default	`true`

事件

Name	Description	Bubbles
`ionScroll`	Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`
`ionScrollEnd`	Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`
`ionScrollStart`	Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`

方法

getScrollElement

Description	Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`: i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
Signature	`getScrollElement() => Promise<HTMLElement>`

scrollByPoint

Description	Scroll by a specified X/Y distance in the component.
Signature	`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`
Parameters	x: The amount to scroll by on the horizontal axis. y: The amount to scroll by on the vertical axis. duration: The amount of time to take scrolling by that amount.

scrollToBottom

Description	Scroll to the bottom of the component.
Signature	`scrollToBottom(duration?: number) => Promise<void>`
Parameters	duration: The amount of time to take scrolling to the bottom. Defaults to `0`.

scrollToPoint

Description	Scroll to a specified X/Y location in the component.
Signature	`scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`
Parameters	x: The point to scroll to on the horizontal axis. y: The point to scroll to on the vertical axis. duration: The amount of time to take scrolling to that point. Defaults to `0`.

scrollToTop

Description	Scroll to the top of the component.
Signature	`scrollToTop(duration?: number) => Promise<void>`
Parameters	duration: The amount of time to take scrolling to the top. Defaults to `0`.

CSS Shadow Parts

Name	Description
`background`	The background of the content.
`scroll`	The scrollable container of the 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`	Bottom padding of the content
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
`--padding-top`	Top padding of the content

插槽

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.

基本用法​

页眉与页脚​

全屏内容​

固定内容​

滚动方法​

滚动事件​

主题定制​

颜色​

CSS Shadow Parts​

CSS 自定义属性​

安全区域填充​

接口​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

属性​

color​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

事件​

方法​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

Contents

基本用法

页眉与页脚

全屏内容

固定内容

滚动方法

滚动事件

主题定制

颜色

CSS Shadow Parts

CSS 自定义属性

安全区域填充

接口

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

属性

color

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

事件

方法

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSS 自定义属性

插槽