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

简介

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

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

如何使用?

先下载源码包

Github

引入到我的小程序

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

app.wxss 引入两个文件

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

使用模板全新开发

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

体验沉浸式导航

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

1
2
3
4
5
6
7
8
9
10
11
12
13
//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 页面配置获取全局参数。

1
2
3
4
5
6
7
8
9
//Page.js
const app = getApp()
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom
}
})

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

1
2
3
4
5
6
7
8
9
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'>
<text class='icon-back'></text>
<text class='icon-homefill'></text>
</navigator>
<view class='content' style='top:{{StatusBar}}px;'>操作条</view>
</view>
</view>

自定义系统Tabbar

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

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

/custom-tab-bar/index.wxml

1
2
3
4
5
6
7
8
 <view class="cu-bar tabbar bg-white shadow">
<view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view class='icon-cu-image'>
<image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
</view>
<view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
</view>
</view>

作者叨叨

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

img

感谢阅读。

转自链接:https://juejin.im/post/5c773b746fb9a049f43bff0f

坚持原创技术分享,您的支持将鼓励我继续创作!