跳到主要内容
版本：v6

ion-content

shadow

内容组件提供易于使用的内容区域，以及一些控制滚动区域的有用方法。每个视图只应有一个内容组件。

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

基本用法​

头部和底部​

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

全屏内容​

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

固定内容​

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

滚动方法​

内容提供可以调用的方法，用于将内容滚动到底部、顶部或特定位置。可以传递 duration（持续时间）以实现平滑过渡，而不是立即改变位置。

滚动事件​

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

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

主题​

颜色​

CSS 阴影部分​

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​

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

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

事件​

Name说明冒泡
ionScrollEmitted while scrolling. This event is disabled by default. Set scrollEvents to true to enable.true
ionScrollEndEmitted when the scroll has ended. This event is disabled by default. Set scrollEvents to true to enable.true
ionScrollStartEmitted when the scroll has started. This event is disabled by default. Set scrollEvents to true to enable.true

方法​

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 阴影部分​

Name说明
backgroundThe background of the content.
scrollThe scrollable container of the content.

CSS 自定义属性​

Name说明
--backgroundBackground of the content
--colorColor of the content
--keyboard-offsetKeyboard offset of the content
--offset-bottomOffset bottom of the content
--offset-topOffset top of the content
--padding-bottomBottom padding of the content
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the content
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the content
--padding-topTop padding of the content

插槽​

Name说明
Content is placed in the scrollable area if provided without a slot.
fixedShould be used for fixed content that should not scroll.

目录

编辑此页