快速上手colorUI

首先传送门 colorUi下载地址：https://github.com/weilanwl/ColorUI

前言：今天下载colorUi下来看了下组件还挺齐全，UI效果视觉上看着在众多框架中脱颖而出，于是下过来看了下，基本上知道了怎么用的。

首页.png

上手原生小程序

• 底部tab
  底部tab没有直接写在app.json里边，而是写在了index.wxml里边，就是下边这段代码。

  
    
      
    
    元素
  
  
    
      
    
    组件
  
  
    
      
    
    扩展
  
  
    
      
    
    关于
  

把点击tab(元素，组件，扩展，关于)4个页面对应的首页，分别通过组件(下方代码)的方式引入。通过NavChange方法监听自定义的tab点击事件，动态获取点击元素上的data-cur属性从而来判断加载哪一个tab。

{
  "usingComponents": {
    "basics": "/pages/basics/home/home",
    "component": "/pages/component/home/home",
    "plugin": "/pages/plugin/home/home",
    "about": "/pages/about/home/home"
  }
}

• 头部菜单
  
  头部.jpg
  
  也是自定义的方式，在app.json中，通过设置

"navigationStyle": "custom" 

这样的话只剩下一个右边的胶囊了，通过设置来自定义了头部，就可以根据需求设置多样化的头部了，这个个人蛮喜欢的。

 "usingComponents": {
    "cu-custom":"/colorui/components/cu-custom"
  }

• 在app中引入colorUI的样式
  在app.wxss中加上就完成了它的样式引用。
  @import "colorui/main.wxss";@import "colorui/icon.wxss";

• 关于样式main.wxss中var(),--red: #e54d42;的使用

--XX定义一个样式常量，这种都会写在根节点上，colorUi写在了page样式下，或者伪类:root下。
比如颜色，就可以color: var(--XX) ;来使用了
还不明白的话var语法传送门： https://developer.mozilla.org/zh-CN/docs/Web/CSS/var