微信小程序-使用ColorUI

一、说明与使用

ColorUI是一个css库。如果使用原生小程序开发，从https://github.com/weilanwl/ColorUI/下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录（与pages目录同级）。

目录结构如下：

 在app.wxss 引入关键Css :main.wxss ,icon.wxss

/**app.wxss**/
@import "colorui/main.wxss";
@import "colorui/icon.wxss";

同时在微信开发者工具中，打开ColorUI2.0-demo，效果如下所示：

二、常见场景使用

选择你需要的样式，找到对应的.WXML，复制需要样式的代码到你需要的页面即可。

• 比如常见的搜索框：

     

• 比如消息或者富矿状态下的数字标签类别：

       

  
    港
    99+
  
  
    9
  
  
    
    
  
  
    99+
  

• 比如特殊样式的底部导航栏：

        

  
     首页
  
  
     分类
  
  
    
    发布
  
  
    
      99
    
    购物车
  
  
    
      
    
    我的
  

  更多操作，请参考ColorUI2.0-demo。