Ionic stepped on the pit-basic layout

Directory:

1. Title bar: Ion-header-bar
2. Footer Bar: Ion-footer-bar
3. Header/footer: Style and content
4. Content area: ion-content
5. scroll box: Ion-scroll
6. Pull refresh: Ion-refresher
7. Scrolling refresh: Ion-infinite-scroll
8. Scripting interface: $ionicScrollDelegate

Title bar: Ion-header-bar

The Ion-header-bar directive declares a title bar element, and the title bar is always at the top of the screen:

<ion-header-bar>...</ion-header-bar>

The ion-header-bar directive has two optional properties:

Align-title-Sets the alignment of the caption text. Allowable values: Left | Right | Center, which corresponds to align left, right, and center, respectively. No-tap-scroll-whether the content area is automatically scrolled to the beginning when the title is clicked. Allowed Values: TRUE | False, which defaults to true.

Footer Bar: Ion-footer-bar

The Ion-footer-bar directive declares a footer bar element, and the footer bar is always at the bottom of the screen:

The <ion-footer-bar>...</ion-footer-bar> ion-footer-bar directive has an optional attribute:

Align-title-Sets the alignment of the caption text. Allowable values: Left | Right | Center.

Header/footer: Style and content

Ion-header-bar and Ion-footer-bar are compiled with their style classes set to. Bar.bar-header and. Bar.bar-footer, recalling what we have learned in the CSS Framework course:

Obviously, you can use these styles to adjust the appearance of Ion-header-bar/ion-footer-bar!

Content area: ion-content

Define the content area using the ion-content directive:

<ion-content>...</ion-content> Ion-content occupy the remaining areas outside the header and footer. When the content exceeds the viewable area, the ion-content can scroll to show the part that is hidden.

Try scrolling through the content area of the sample effect on the right, and you'll find the scroll bar that emerges. When scrolling stops, the floating bar disappears. This is a Ionic custom scrolling view, you can use the Overflow-scroll property settings to use the system's built-in scroll bar:

<ion-content overflow-scroll= "true" >...</ion-content>

scroll box: Ion-scroll

The Ion-scroll directive declares a scrollable container element in which the user can drag and hold content:

The <ion-scroll> </ion-scroll> ion-scroll directive has two commonly used optional attributes:

Direction-the direction in which content can be scrolled. Allowable value: X|y|xy. The default is Y. Zooming-whether to support pinch-to-zoom (pinch-and-pull scaling). Allowed Values: TRUE | False When using Ion-scroll, you need to explicitly specify the size (height and width) of the scroll box elements and content elements:

Pull refresh: ion-refresher use instruction Ion-refresher to increase the ability to pull the refresh/pull-to-refresh for a scrolling container (Ion-scroll or ion-content):

The <ion-refresher></ion-refresher> ion-refresher directive has the following optional properties:

• On-refresh-executes this expression when the user pulls down enough distance and releases
• On-pulling-executes this expression when the user starts to pull down
• Pulling-text-Displays this text when the user pulls down
• Pulling-icon-Displays this icon when the user pulls down
• Refreshing-icon-The wait icon that appears when the user pulls down and releases. Ionic recommends using spinner instead of this attribute
• Spinner-the same as Refreshing-icon, but spinner is an SVG-based animation
• Disable-pulling-rotation-Disable the drop-down icon rotation animation Note After the refresh is complete, the framework should be notified using the $broadcast () method of the scope:

$scope. $broadcast ("Scoll.refreshcomplete")

Scrolling refresh: Ion-infinite-scroll

You can use the Ion-infinite-scroll directive to increase the scrolling refresh feature for a scrolling container (Ion-scroll or ion-content):

<ion-infinite-scroll on-infinite= "" >...</ion-infinite-scroll> ion-infinite-scroll directives have the following properties:

• On-infinite-Must. Execute this expression when scrolling to the bottom
• Distance-optional. The percentage distance from the bottom. The on-infinite is executed when the value is exceeded at the bottom of the distance. Default is 1%
• Icon-Optional. The icon displayed when loading. The default is ion-load-d. Ionic recommends using spinner instead of the Icon property
• Spinner-Optional. Loaded spinner. Default is Ionspinner
• Immediate-check-Optional. Check the scroll box scope immediately when loading

Scripting interface: $ionicScrollDelegate

You can use the service $ionicscrolldelegate to control the scrolling container (Ion-scroll or ion-content) through scripting. $ionicScrollDelegate Service provides the following common methods:

• Resize () recalculates the container size. This method should be called when the size of the parent element changes

• ScrollTop ([shouldanimate]) scrolls to the top of the content. The shouldanimate parameter is True|false, indicating whether to use animation to show the scrolling process

• Scrollbottom ([shouldanimate]) scrolls to the bottom of the content. The shouldanimate parameter is True|false, indicating whether to use animation to show the scrolling process

• ScrollTo (Left,top[,shouldanimate]) scrolls to the specified position. Left and top indicate the x and Y coordinates to scroll to

• Scrollby (Left,top[,shouldanimate]) scrolls the specified offset. Left and top indicate the x offset and Y offset to scroll, respectively

• GetScrollPosition () reads the current view position. The return value is a JSON object with left and top properties, representing the x and y coordinates, respectively

Ionic stepped on the pit-basic layout