[TOC] > [參考](https://ext.dcloud.net.cn/plugin?id=239) ## 快速入門 ### 水平垂直居中 ``` <view class="flex align-center justify-center "> <image class="image-icon " src="@/static/edit.jpg" mode="aspectFit"></image> <image class="image-icon margin-left" src="@/static/add.jpg" mode="aspectFit"></image> </view> ``` ### 卡片布局 ``` <view class="cu-card article " > <view class="cu-item shadow"> ... </view> </view> ``` ## 開始使用 下載源碼解壓，復制根目錄的 /colorui 文件夾到你的根目錄 `App.vue` 引入關鍵Css `main.css`,`icon.css` ``` <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的項目css */ .... </style> ``` ## 使用自定義導航欄 導航欄作為常用組件有做簡單封裝，當然你也可以直接復制代碼結構自己修改，達到個性化目的。 App.vue 獲得系統信息 ``` onLaunch: function() { uni.getSystemInfo({ success: function(e) { // #ifndef MP Vue.prototype.StatusBar = e.statusBarHeight; if (e.platform == 'android') { Vue.prototype.CustomBar = e.statusBarHeight + 50; } else { Vue.prototype.CustomBar = e.statusBarHeight + 45; }; // #endif // #ifdef MP-WEIXIN Vue.prototype.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); Vue.prototype.Custom = custom; Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight; // #endif // #ifdef MP-ALIPAY Vue.prototype.StatusBar = e.statusBarHeight; Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight; // #endif } }) }, ``` pages.json 配置取消系統導航欄 ``` "globalStyle": { "navigationStyle": "custom" }, ``` 復制代碼結構可以直接使用，注意全局變量的獲取。 使用封裝,在`main.js` 引入 cu-custom 組件。 ``` import cuCustom from './colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom) ``` page.vue 頁面可以直接調用了 ``` <cu-custom bgColor="bg-gradual-blue" :isBack="true"> <block slot="backText">返回</block> <block slot="content">導航欄</block> </cu-custom> ``` | 參數 | 作用 | 類型 | 默認值 | | --- | --- | --- | --- | | bgColor | 背景顏色類名 | String | '' | | isBack | 是否開啟返回 | Boolean | false | | bgImage | 背景圖片路徑 | String | '' | | slot塊 | 作用 | | --- | --- | | backText | 返回時的文字 | | content | 中間區域 | | right | 右側區域(小程序端可使用范圍很窄！) | ## 使用自定義Tabbar 這部分暫時沒有封裝，思路可以參考下我的源碼，原理是一個主頁面引入多個頁面，在主頁面進行切換顯示。這樣可以解決切換時閃爍的問題。