小程序ui什么意思-微信小程序-使用CoorUI-小程序ui-即速应用

小程序ui什么意思-微信小程序-使用CoorUI-小程序ui

浏览量：2796 时间：2020-03-20 来源：chibimarukochan

一、说明与使用
1.ColorUI是一个css库。如果使用原生小程序开发，从https://github.com/weilanwl/ColorUI/下载源码解压获得/demo，复制目录下的/colorui文件夹到你的项目根目录（与pages目录同级）。
2.目录结构如下：
3.
4.在app.wxss引入关键Css:main.wxss,icon.wxss
/**app.wxss**/@import"colorui/main.wxss";@import"colorui/icon.wxss";
5.同时在微信开发者工具中，打开ColorUI2.0-demo，效果如下所示：
6.
二、常见场景使用
7.选择你需要的样式，找到对应的.WXML，复制需要样式的代码到你需要的页面即可。
比如常见的搜索框：
8.
viewclass="cu-barbg-whitesearchfixed"style="top:{{CustomBar}}px"viewclass="search-formround"textclass="icon-search"/textinputtype="text"placeholder="搜索"confirm-type="search"bindinput="searchIcon"/input/view/view比如消息或者富矿状态下的数字标签类别：
9.
viewclass="paddingflexjustify-betweenalign-center"viewclass="cu-avatarxlradius"港viewclass="cu-tagbadge"99+/view/viewviewclass="cu-avatarxlradius"style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"viewclass="cu-tagbadge"9/view/viewviewclass="cu-avatarxlradius"viewclass="cu-tagbadge"/viewtextclass="icon-people"/text/viewviewclass="cu-avatarxlradius"viewclass="cu-tagbadge"99+/view/view/view比如特殊样式的底部导航栏：
10.
viewclass="cu-bartabbarmargin-bottom-xlbg-white"viewclass="actiontext-green"viewclass="icon-homefill"/view首页/viewviewclass="actiontext-gray"viewclass="icon-similar"/view分类/viewviewclass="actiontext-grayadd-action"buttonclass="cu-btnicon-addbg-greenshadow"/button发布/viewviewclass="actiontext-gray"viewclass="icon-cart"viewclass="cu-tagbadge"99/view/view购物车/viewviewclass="actiontext-gray"viewclass="icon-my"viewclass="cu-tagbadge"/view/view我的/view/view
11.更多操作，请参考ColorUI2.0-demo。