小程序原生高颜值组件库 - colorUI

前言

小程序开发使用组件库可以起到事半功倍的效果，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切换函数