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

  
   ...
   

* 3.设计透明导航栏

home.html

  
    首页
  

效果图

5-1.gif

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

完！