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

image

简介

ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！

浏览GitHub：https://github.com/weilanwl/ColorUI

image

如何使用？

先下载源码包

→ Github

引入到我的小程序

将 /demo/ 下的 colorui.wxss 和 icon.wxss 复制到小程序的根目录下

在 app.wxss 引入两个文件

@import "icon.wxss";
@import "colorui.wxss";

使用模板全新开发

复制 /template/ 文件夹并重命名为你的项目，微信开发者工具导入为小程序就可以使用ColorUI了

体验沉浸式导航

image

App.js
获取系统参数并写入全局参数。

//App.js
App({
  onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  }
})

Page.js
页面配置获取全局参数。

//Page.js
const app = getApp()
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom
  }  
})

Page.wxml
页面构造导航。更多导航样式请下载Demo查阅 操作条组件。

  
    
      
      
    
    操作条
  

自定义系统Tabbar

image

按照官方 自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。

使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。
更多Tabbar样式请下载Demo查阅 操作条组件。

/custom-tab-bar/index.wxml

 
  
    
      
    
    {{item.text}}
  

作者叨叨

ColorUI是一个高度自定义的Css样式库，包含了开发常用的元素和组件，元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。

其实大家都在催我写文档，但这个库源码就在这，所见即所得，粘贴复制就可以得到你想要的页面。当然，文档我还是要写的，也希望大家多多提意见。

现在前端的开发方向基本都是奔着Js方向的，布局和样式大家讨论的有点少。以后我会在开发者社区多聊一聊关于开发中的布局和样式。

image

感谢阅读。