简介
ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
浏览GitHub:https://github.com/weilanwl/ColorUI
如何使用?
先下载源码包
→ Github
引入到我的小程序
将 /demo/ 下的 colorui.wxss 和 icon.wxss 复制到小程序的根目录下
在 app.wxss 引入两个文件
1 | @import "icon.wxss"; |
使用模板全新开发
复制 /template/ 文件夹并重命名为你的项目,微信开发者工具导入为小程序就可以使用ColorUI了
体验沉浸式导航
App.js
获取系统参数并写入全局参数。
1 | //App.js |
Page.js 页面配置获取全局参数。
1 | //Page.js |
Page.wxml 页面构造导航。更多导航样式请下载Demo查阅 操作条组件。
1 | <view class="cu-custom" style="height:{{CustomBar}}px;"> |
自定义系统Tabbar
按照官方 自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。
使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。 更多Tabbar样式请下载Demo查阅 操作条组件。
/custom-tab-bar/index.wxml
1 | <view class="cu-bar tabbar bg-white shadow"> |
作者叨叨
ColorUI是一个高度自定义的Css样式库,包含了开发常用的元素和组件,元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。
感谢阅读。