image

簡介

ColorUI是一個Css類的UI組件庫塞祈！不是一個Js框架鞍爱。相比于同類小程序組件庫涕蜂，ColorUI更注重于視覺交互析校！

瀏覽GitHub：https://github.com/weilanwl/ColorUI

image

如何使用？

先下載源碼包

→ Github

引入到我的小程序

將 /demo/ 下的 colorui.wxss 和 icon.wxss 復(fù)制到小程序的根目錄下

在 app.wxss 引入兩個文件

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

使用模板全新開發(fā)

復(fù)制 /template/ 文件夾并重命名為你的項(xiàng)目长酗，微信開發(fā)者工具導(dǎo)入為小程序就可以使用ColorUI了

體驗(yàn)沉浸式導(dǎo)航

image

App.js
獲取系統(tǒng)參數(shù)并寫入全局參數(shù)溪北。

//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
頁面配置獲取全局參數(shù)。

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

Page.wxml
頁面構(gòu)造導(dǎo)航夺脾。更多導(dǎo)航樣式請下載Demo查閱 操作條組件之拨。

<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>

自定義系統(tǒng)Tabbar

image

按照官方 自定義 tabBar 配置好Tabbar (開發(fā)工具和版本庫請使用最新版)。

使用ColorUI配置Tabbar只需要更改 Wxml 頁的內(nèi)容即可咧叭。
更多Tabbar樣式請下載Demo查閱 操作條組件蚀乔。

/custom-tab-bar/index.wxml

 <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樣式庫，包含了開發(fā)常用的元素和組件菲茬，元素組件之間也能相互嵌套使用吉挣。我也會不定期更新一些擴(kuò)展到源碼。

其實(shí)大家都在催我寫文檔婉弹，但這個庫源碼就在這听想，所見即所得，粘貼復(fù)制就可以得到你想要的頁面马胧。當(dāng)然，文檔我還是要寫的衔峰，也希望大家多多提意見佩脊。

現(xiàn)在前端的開發(fā)方向基本都是奔著Js方向的，布局和樣式大家討論的有點(diǎn)少垫卤。以后我會在開發(fā)者社區(qū)多聊一聊關(guān)于開發(fā)中的布局和樣式威彰。

image

感謝閱讀。