Ionic - API

放在前面：ionic3中文api

1.操作表：ActionSheetController

2:格 
（1）垂直对齐：

a.通过向行row中添加不同的属性，可以将所有列垂直对齐

align-items-start/align-items-center/align-items-center/

<ion-row align-items-start>
...
<ion-col>
      4 of 4 
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6

b.通过将对齐属性直接添加到列col，列也可以与其他列的方式不同 
align-self-start/align-self-center/align-self-end

<ion-row>
    <ion-col align-self-start>
      <div>
        1 of 4
      </div>
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

（2）水平对齐： 
通过向行中添加不同的属性，所有列可以在行内水平对齐 
justify-content-start/center/end/around/between

<ion-row justify-content-start>
    <ion-col col-3>
      1 of 2
    </ion-col>
    <ion-col col-3>
      2 of 2
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

（3）自定义网格 
可以通过Sass变量修改网格列数及其填充数。 
$grid-columns：用于生成每个列的宽度（以百分比表示）。

grid−padding−width：用于对电网的填充，同时grid−padding−width：用于对电网的填充，同时grid-padding-widths允许特定断点值宽度在跨越均匀划分padding-left和 padding-right以及padding-top和padding-bottom网格和列

$grid-columns:               12 !default;

$grid-padding-width:         10px !default;

$grid-padding-widths: (
  xs: $grid-padding-width,
  sm: $grid-padding-width,
  md: $grid-padding-width,
  lg: $grid-padding-width,
  xl: $grid-padding-width
) !default;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（4）网格层 
要自定义断点及其值，请覆盖 grid−breakpoints和grid−breakpoints和grid-max-widths

$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3.触觉：Haptic 
设备上的触觉引擎交互

4.图：ion-img 
一个页面在可滚动区域内可能存在数百甚至数千个图像 
注意：ion-img仅用于虚拟滚动内部使用

5.物品放置

属性 描述 
item-start 
放置在所有其他元素的左侧，在内部项目之外。如复选框 
item-end 
放在内部项目内部的所有其他元素的右侧，在输入包装器之外。如无线电和切换

item-content 
放置ion-label在输入包装内的任何内部的右侧。如Select， Input，TextArea，DateTime和 Range。

6.虚拟滚动：[virtualScroll] 
给该virtualScroll属性的数据必须是一个数组。*virtualItem需要具有该属性的项目模板virtualScrol；

记录数组将传递给包含数据的虚拟滚动条来创建模板，为每个记录创建的模板（称为单元格）可以由项目，页眉和页脚组成：

基础：

<ion-list [virtualScroll]="items">

  <ion-item *virtualItem="let item">
    {{ item }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

页眉和页脚 
部分页眉和页脚是可选的。它们可以从开发人员定义的函数动态创建；

自定义函数中的逻辑应该确定是否创建截面模板以及要提供给模板的数据。null如果不创建模板，则返回自定义函数。

<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn">

  <ion-item-divider *virtualHeader="let header">
    Header: {{ header }}
  </ion-item-divider>

  <ion-item *virtualItem="let item">
    Item: {{ item }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

以下是每个记录调用的自定义函数的示例。它通过单个记录，记录的索引号和整个记录数组。在这个例子中，每20个记录将插入一个标题。所以在第19到第20记录之间，在39和40之间，等等，将创建一个将模板的数据来自函数返回的数据。

myHeaderFn(record, recordIndex, records) {
  if (recordIndex % 20 === 0) {
    return 'Header ' + recordIndex;
  }
  return null;
}

• 1
• 2
• 3
• 4
• 5
• 6

大概宽度和高度 
如果虚拟滚动中的项目的高度不接近40px的默认大小，则为aboutItemHeight高度提供一个值非常重要。精确的像素完美大小不是必需的，但没有估计，虚拟滚动将无法正确呈现。

虚拟滚动中的图像 
HTTP请求，图像解码和图像渲染可能会导致滚动滚动。为了更好地控制图像，Ionic提供 了管理HTTP请求和图像渲染。当快速滚动项目时，知道什么时候和什么时候不提出请求，什么时候何时不渲染图像，并且只加载滚动后可以查看的图像

建议在本机元素上使用该组件， 因为当元素添加到DOM时，它会立即为图像文件发出HTTP请求。此外， 当用户滚动时可以随时呈现。但是，它 是受包含的ion-content，并且不快速滚动时呈现图像：

<ion-list [virtualScroll]="items">

  <ion-item *virtualItem="let item">
    <ion-avatar item-start>
      <ion-img [src]="item.avatarUrl"></ion-img>
    </ion-avatar>
    {{ item.firstName }} {{ item.lastName }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

自定义组件 
如果在Virtual Scroll中使用自定义组件，最好将其包装好， 

以确保组件正确呈现。由于每个定制组件的实现和内部结构可能会有很大的不同，因此在一个内部进行包装

是确保维度正确测量的安全方法。

 

<ion-list [virtualScroll]="items">

  <div *virtualItem="let item">
    <my-custom-item [item]="item">
       {{ item }}
    </my-custom-item>
  </div>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

虚拟滚动性能提示

1、使用Cordova部署到iOS时，强烈建议您使用 WKWebView插件

2、锁定元素尺寸和位置：为了虚拟滚动以有效地对每个项目进行大小和定位，每个虚拟项目中的每个元素都不会动态地更改其维度或位置，

确保大小和位置的最佳方式不会改变，建议每个虚拟项目通过CSS锁定其大小

3.on-img图像被加载，所以只有可视图像被渲染，并且在滚动时有效地控制HTTP请求

4.设置近似宽度和高度 
我们可以给虚拟滚动一个近似的大小，因此允许虚拟滚动来决定应该创建多少个项目。

5、应使用更改数据集 virtualTrackBy

迭代器中的元素的身份可能会在数据没有改变的情况下进行更改。这可能发生，例如，如果从RPC生成的迭代器到服务器，并且该RPC重新运行。即使“数据”没有改变，第二个响应将产生具有不同身份的对象，而Ionic将会拆除整个DOM并重建它。这是一个昂贵的操作，如果可能的话应该避免。

6.高效的页眉和页脚功能 
每个虚拟项目必须保持非常高效，但是一种真正消除其性能的方法是在段头和页脚函数中执行任何DOM操作。对数据集中的每个记录都调用这些函数，因此请确保它们具有性能。

7.视图控制器：

import { ViewController } from 'ionic-angular';

• 1
• 2

8.活版印刷：[ion-text] 
排版组件是一个简单的组件，可用于为任何元素的文本颜色设置样式

<h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>

• 1

9.工具栏：ion-toolbar

工具栏是位于内容上方或下方的通用栏。与导航栏不同，工具栏可以用作子标题。

当工具栏放置在一个或之内时，工具栏保持固定在其各自的位置。放在内部时 ，工具栏将滚动内容。 
工具栏中的按钮 
放置在工具栏中的按钮应放置在 元素的内部。一个例外是一个menuToggle按钮。它不应放在元素的内部

页眉/页脚框阴影和边框

阴影:md 
边框:ios

两个md箱阴影和ios边界可以通过添加被去除no-border 属性的元素。

10.切换：ion-toggle

11.微妙通知：ToastController 
可用于提供有关操作的反馈或显示系统消息 
（1）创建： 
所有的toast选项都应该在create方法的第一个参数中传递：create(opts)。要显示的消息应该在message属性中传递。

该showCloseButton选项可以设置为true，以便在吐司上显示关闭按钮。

（2）定位： 
默认显示在底部，也可以显示在视图窗口的顶部、底部和中间。位置可以传递给Toast.create(opts)方法。 
（3）驳回： 
在特定时间之后，吐司可以通过传递毫秒数来duration在吐司选项中显示，自动关闭。 
如果showCloseButton设置为true，则关闭按钮将关闭吐司。 
要在创建后关闭烤面包片，请调用dismiss() Toast实例上的方法。 
该onDidDismiss功能可以在Toast被关闭之后调用来执行一个动作。

import { ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController) { }

presentToast() {
  const toast = this.toastCtrl.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  });

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

12.标题：ion-title

是设置Toolbar或的标题的组件Navbar

<ion-navbar>
    <ion-title>Main Header</ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

13.缩略图：ion-thumbnail 
缩略图可以放置在带有item-start或item-end指令的项目的左侧或右侧。

14.标签：ion-tabs 
abs组件，写为，是单个Tab组件的容器。每个人ion-tab 都是NavController的声明组件 
(1).放置： 
可以使用组件tabsPlacement上的属性或应用程序的配置来配置位置。有关可用值，请参阅下面的输入属性tabsPlacement。

（2）布局： 
可以使用tabsLayout 属性定义所有选项卡的布局。如果单个选项卡具有标题和图标，则默认情况下，图标将显示在标题的顶部。

设置标签栏的位置：top，bottom。

所有标签页可以通过设定的值被改变tabsLayout了的元素，或在您的应用程序的配置。例如，如果要仅在Android上显示标题的标签，但显示图标和iOS的标题，这很有用。有关 可用值，请参阅下面的输入属性tabsLayout。 
设置的TabBar布局：icon-top，icon-start，icon-end，icon-bottom，icon-hide，title-hide。

（3）、可以通过不同的方式从标签组件中选择特定的选项卡。您可以使用该selectedIndex属性来设置元素上的索引，也可以 在创建后select()从Tabs实例调用

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

• 1
• 2
• 3
• 4
• 5

（4）也可以抓取Tabs实例并调用该select() 方法。这要求元素有一个id。例如，将值设置id为myTabs：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

• 1
• 2
• 3
• 4
• 5

然后在你的类中，你可以抓住Tabs实例并调用select()，传递选项卡的索引作为参数。在这里，我们通过使用ViewChild来抓取标签。

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  this.tabRef.select(2);
 }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

（5）还可以通过select()使用NavController实例调用父视图从子组件切换选项卡。例如，假设您有一个TabsPage组件，您可以从任何子组件调用以下内容切换到TabsRoot3：

switchTabs() {
  this.navCtrl.parent.select(2);
}

• 1
• 2
• 3

16.标签：单个ion-tab

写入的Tab组件基于模式进行样式化，并应与Tabs组件结合使用。

每个ion-tab都是NavController的声明组件。基本上，每个标签都是NavController。

root：属性是要为该选项卡加载的页面， 
tabTitle：是可在选项卡上显示的可选文本， 
tabIcon：也是可选图标

<ion-tabs>
 <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

• 1
• 2
• 3

然后，（1）在你的班级你可以设置chatRoot一个导入的类：

import { ChatPage } from '../chat/chat';

export class Tabs {
  // here we'll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（2）或者将一些参数传递到选项卡的根页面 rootParams。下面我们chatParams转到“聊天”选项卡 
a.

<ion-tabs>
 <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

• 1
• 2
• 3

b.

export class Tabs {
  chatRoot = ChatPage;

  // set some user information on chatParams
  chatParams = {
    user1: 'admin',
    user2: 'ionic'
  };

  constructor() {

  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

c.而在ChatPage你可以从数据NavParams：

export class ChatPage {
  constructor(navParams: NavParams) {
    console.log('Passed params', navParams.data);
  }
}

• 1
• 2
• 3
• 4
• 5

(ionSelect)当选择选项卡时，可以使用该事件调用类中的方法。以下是从其中一个选项卡显示模态的示例。

<ion-tabs>
  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>pop

• 1
• 2
• 3

export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

  chat() {
    let modal = this.modalCtrl.create(ChatPage);
    modal.present();
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

17.splitpane 
是一个可以创建多视图布局的组件。与iPad应用程序类似，SplitPane允许在视口增加时显示UI元素（如菜单）

如果设备屏幕尺寸低于一定大小，SplitPane会崩溃，菜单将再次隐藏。这在创建通过浏览器投放或通过应用商店部署到手机和平板电脑的应用程序时尤其有用。

使用SplitPane，只需将组件添加到您的根组件周围

<ion-split-pane>
  <!--  our side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

设置断点: 
默认情况下，当屏幕大于768px时，SplitPane将会展开。如果要自定义，请使用when输入。该when输入可以接受任何有效的媒体查询，因为它使用matchMedia()的下面。

<ion-split-pane when="(min-width: 475px)">

  <!--  our side menu  -->
  <ion-menu [content]="content">
  ....
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

SplitPane将使用main属性查找元素，并使其成为较大屏幕上的中心组件。该main组分可以是任何离子组分（ion-nav或ion-tabs除了）ion-menu。

18.微调：ion-spinner

该ion-spinner组件提供各种动画SVG旋转器。

旋转器使您能够向用户反馈，该应用程序正在积极处理/思考/等待/冷静，或者您希望的任何内容。默认情况下，该ion-refresher功能使用此微调组件，而刷新器处于该refreshing状态。

通过设置name属性，您可以指定要使用的预定义旋转器，无论平台是什么。

name的值可以取： 
ios 
ios-small 
bubbles 
circles 
crescent 月牙 
dots

<ion-spinner name="bubbles"></ion-spinner>

• 1

用CSS样式化SVG： 
SVG使用术语stroke，而不是border和，fill而不是background-color。

ion-spinner * {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #222;
}

• 1
• 2
• 3
• 4
• 5
• 6

 

转载链接：https://blog.youkuaiyun.com/kassiaaaa/article/details/78344534