ion-content

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4内容组件ion-content对项目进行布局。

ion-content官方文档地址:https://ionicframework.com/docs/api/content

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)

<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: `"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`
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 `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`

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

ion-content

ion-content 用法(Usage)

ion-content 属性(Properties)

color

forceOverscroll

fullscreen

scrollion-content 事件(Events)

scrollX

scrollY

ion-content 事件(Events)

ion-content 内置方法(Methods)

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint