版本：v8

ion-content

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

内容组件与许多其他 Ionic 组件一样，可以使用 CSS 工具提供的全局样式进行自定义，以修改其内边距、外边距等，或者使用 CSS 和可用的 CSS 自定义属性单独设置其样式。

基本用法

头部和底部

内容可以是页面中唯一的顶级组件，也可以与头部、底部或两者一起使用。与头部或底部一起使用时，它将调整其大小以填充剩余高度。

全屏内容

默认情况下，内容填充头部和底部之间的空间，但不会在它们后方显示。在某些情况下，可能需要内容在头部和底部后方滚动，例如当其中任何一个设置了 translucent 属性，或者工具栏设置了 opacity 时。这可以通过将内容的 fullscreen 属性设置为 true 来实现。

固定内容

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

fixedSlotPlacement 属性用于确定 fixed 插槽中的内容在 DOM 中放置于主内容之前还是之后。当设置为 before 时，固定插槽内容将放置在主内容之前，因此会在主内容获得键盘焦点之前接收键盘焦点。当主内容包含无限滚动列表时，这可以防止通过按 Tab 键访问到 FAB 或其他固定内容。

滚动方法

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

滚动事件

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

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

主题定制

颜色

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);
}

Interfaces

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;
}

Properties

color

说明	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.
属性	`color`
类型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
默认值	`undefined`

fixedSlotPlacement

说明	Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
属性	`fixed-slot-placement`
类型	`"after" ｜ "before"`
默认值	`'after'`

forceOverscroll

说明	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.
属性	`force-overscroll`
类型	`boolean ｜ undefined`
默认值	`undefined`

fullscreen

说明	If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
属性	`fullscreen`
类型	`boolean`
默认值	`false`

scrollEvents

说明	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`.
属性	`scroll-events`
类型	`boolean`
默认值	`false`

scrollX

说明	If you want to enable the content scrolling in the X axis, set this property to `true`.
属性	`scroll-x`
类型	`boolean`
默认值	`false`

scrollY

说明	If you want to disable the content scrolling in the Y axis, set this property to `false`.
属性	`scroll-y`
类型	`boolean`
默认值	`true`

Events

Name	说明	冒泡
`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`

Methods

getScrollElement

说明	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.
签名	`getScrollElement() => Promise<HTMLElement>`

scrollByPoint

说明	Scroll by a specified X/Y distance in the component.
签名	`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`
参数	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

说明	Scroll to the bottom of the component.
签名	`scrollToBottom(duration?: number) => Promise<void>`
参数	duration: The amount of time to take scrolling to the bottom. Defaults to `0`.

scrollToPoint

说明	Scroll to a specified X/Y location in the component.
签名	`scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`
参数	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

说明	Scroll to the top of the component.
签名	`scrollToTop(duration?: number) => Promise<void>`
参数	duration: The amount of time to take scrolling to the top. Defaults to `0`.

CSS Shadow Parts

Name	说明
`background`	The background of the content.
`scroll`	The scrollable container of the content.

CSS Custom Properties

Name	说明
`--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

Slots

Name	说明
	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 自定义属性​

安全区域内边距​

Interfaces​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

Properties​

color​

fixedSlotPlacement​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

Events​

Methods​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

目录

基本用法

头部和底部

全屏内容

固定内容

滚动方法

滚动事件

主题定制

颜色

CSS Shadow Parts

CSS 自定义属性

安全区域内边距

Interfaces

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

Properties

color

fixedSlotPlacement

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

Events

Methods

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSS Custom Properties

Slots