前言
小程序开发使用组件库可以起到事半功倍的效果,colorui是一款高颜值的开源组件库。
下载
GitHub传送门:https://github.com/weilanwl/ColorUI
介绍
下载后,开发者工具导入demo
丰富的UI,可以在wxml文件中查看class对应的效果。
使用
如何使用,在上节中有稍微提及了一下
1)复制colorui文件夹到自己的项目根目录下;
2)在app.wxss中引入样式
@import "colorui/main.css";
@import "colorui/icon.css";
3)使用对应的class即可,如
<button class="cu-btn block line-orange lg round margin-lr-lg margin-tb-lg">按钮</button>
效果(边距、颜色、字体、布局等都可以在class中设置):
4)导航栏自定义参见上节,关键步骤:
- app.json 取消系统导航栏
- app.json 全局引入组件
- app.js onLaunch获取系统信息
- 页面wxml引入 cu-custom 组件
5)底部tabbar自定义参数上节,关键步骤:
- app.json 不配置系统tabbar
- 页面wxml定义视图组件,class=“cu-bar tabbar foot”
- 页面js定义tab切换函数