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。