ColorUI-高颜值组件库
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，复制需要样式的代码到你需要的页面即可。
- 比如常见的搜索框：
-
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>
- 比如消息或者富矿状态下的数字标签类别：
-
class=
"padding flex justify-between align-center">
-
class=
"cu-avatar xl radius">
-
港
-
class=
"cu-tag badge">
99+
-
-
class=
"cu-avatar xl radius" style=
"background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
-
class=
"cu-tag badge">
9
-
-
class=
"cu-avatar xl radius">
-
class=
"cu-tag badge">
-
class=
"icon-people">
-
-
class=
"cu-avatar xl radius">
-
class=
"cu-tag badge">
99+
-
-
- 比如特殊样式的底部导航栏：
-
class=
"cu-bar tabbar margin-bottom-xl bg-white">
-
class=
"action text-green">
-
class=
"icon-homefill"> 首页
-
-
class=
"action text-gray">
-
class=
"icon-similar"> 分类
-
-
class=
"action text-gray add-action">
-
-
发布
-
-
class=
"action text-gray">
-
class=
"icon-cart">
-
class=
"cu-tag badge">
99
-
-
购物车
-
-
class=
"action text-gray">
-
class=
"icon-my">
-
class=
"cu-tag badge">
-
-
我的
-
-
更多操作，请参考ColorUI2.0-demo。