ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计

这一讲主要包含以下几个部分

• 1.配置APP主色调；
• 2.设置ion-content组建的fullscreen属性；
• 3.设计透明导航栏

配置APP主色调；

找到src/theme/variables.scss，修改$colors的primary颜色值：

variables.scss

$colors: (
  primary:    #f8285c,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

2.设置ion-content组建的fullscreen属性；

home.html

  <ion-content fullscreen>
   ...
  </ion-content> 

* 3.设计透明导航栏

home.html

<ion-header>
  <ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
    <ion-title>首页</ion-title>
  </ion-navbar>
</ion-header>

效果图

5-1.gif

下一讲将讲解在ionic3中如何封装通用组建。

完！