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。