ColorUI-高颜值组件库

      版权声明：本文为博主原创文章，未经博主允许不得转载。          https://blog.csdn.net/ChibiMarukoChan/article/details/89636610        </div>
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
                          <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
      <div class="htmledit_views" id="content_views">
        <h3><a name="t0"></a>一、说明与使用</h3>

ColorUI是一个css库。（开发者才18岁，大牛~）如果使用原生小程序开发，从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，复制需要样式的代码到你需要的页面即可。

• 比如常见的搜索框：

     

 
 

   
   

    
    

   
   
   
   

    
    

     
     <view 
     
     class=
     
     "cu-bar bg-white search fixed" style=
     
     "top:{{CustomBar}}px">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <view class="search-form round">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <text class="icon-search">
     
     </text>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <input type="text" placeholder="搜索" confirm-type="search" bindinput="searchIcon">
     
     </input>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <
     
     /view>
    
    
   
   
 
 

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

       

 
 

   
   

    
    

   
   
   
   

    
    

     
     <view 
     
     class=
     
     "padding flex justify-between align-center">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         港
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "cu-tag badge">
     
     99+</view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "cu-avatar xl radius" style=
     
     "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "cu-tag badge">
     
     9</view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "cu-tag badge"></view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <text 
     
     class=
     
     "icon-people"></text>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "cu-tag badge">
     
     99+</view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </view>
    
    
   
   
 
 

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

        

 
 

   
   

    
    

   
   
   
   

    
    

     
     <view 
     
     class=
     
     "cu-bar tabbar margin-bottom-xl bg-white">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "action text-green">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "icon-homefill"></view> 首页
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "action text-gray">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "icon-similar"></view> 分类
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "action text-gray add-action">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <button 
     
     class=
     
     "cu-btn icon-add bg-green shadow"></button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         发布
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "action text-gray">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "icon-cart">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           <view 
     
     class=
     
     "cu-tag badge">
     
     99</view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         购物车
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       <view 
     
     class=
     
     "action text-gray">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <view 
     
     class=
     
     "icon-my">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           <view 
     
     class=
     
     "cu-tag badge"></view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         我的
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       </view>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </view>
    
    
   
   
 
 

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