Ionic组件

头部

js
<ion-header-bar
  align-title="left | center | right"  // 头部标题位置
  no-tap-scroll="true" // 当点击标题时，是否将内容区域滚动到最开始
>
</ion-header-bar>

底部

js
<ion-footer-bar></ion-footer-bar>

视图头部

写在index.html页面

js
<ion-nav-bar 
  align-title="left | center | right" //头部标题位置
  no-tap-scroll="true" //当点击标题时，是否将内容区域滚动到最开始
>
回退按钮
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

视图内容区域

js
<ion-view
  view-title="" // 头部标题内容,需要在index.html页面置入<ion-  nav-bar>
  cache-view="true" // 是否缓存controllerJS代码模板
>
// 自定义按钮
<ion-nav-buttons 
  side="right | left">
<button></button>
</ion-nav-buttons>
<ion-nav-title>标题</ion-nav-title>
</ion-view>

底部tab

js
<ion-tabs>
<ion-tab 
  icon-on="" // 选中时图标样式，里面写相应的class名称即可
  icon-off="" // 未选中时图标样式，里面写相应的class名称即可
  badge="10" // 徽章的数字
  on-select // 选中事件
  on-deselect // 未选中事件
  ng-click //点击事件
  >
</ion-tab>
</ion-tabs>

禁止横屏

当我们手机屏幕设置成自动选择，在手机横屏后，可能会打乱布局，解决办法如下：

1. 进入项目目录安装插件  

bash
ionic plugin add cordova-plugin-screen-orientation

2. 修改config.xml文件

landscape表示横屏显示，portrait表示竖屏显示

js
<preference name="orientation" value="portrait" />

启动画面加载loading取消

js
<preference name="ShowSplashScreenSpinner" value="false"/>

APP图标和启动页修改

1. 根目录下的resources文件夹下的android和ios文件夹删除
2. 根目录下的config.xml代码删除

js
<platform name="android">
...
</platform>
<platform name="ios">
...
</platform>
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>

3. 加入icon.png和splash.png，最好和原先的一样，icon.png1024*1024最佳

4. 生成图片

bash
 ionic resources # 生成icon 和 splash不同尺寸的图片
 ionic resources --icon  # 生成icon 不同尺寸的图片
 ionic resources --splash # 生成splash不同尺寸的图片