顏值高、性能好的小程序組件庫，帶給你不一樣的視覺體驗
PS：想直接查看組件效果的小伙伴可直接跳到組件預覽標題Githubhttps://github.com/weilanwl/ColorUI語雀知識庫https://www.yuque.com/coloruiPS：語雀是一個適合個人和團隊的高質(zhì)量文檔知識管理庫在Uniapp中開發(fā)在最...
介紹
ColorUI是一個高飽和度色彩，注重視覺效果的小程序組件庫，可以在國內(nèi)比較火的uniapp或者原生小程序中進行開發(fā)。文章中將進行各組件的截圖預覽，一定不會讓你失望的！
PS：想直接查看組件效果的小伙伴可直接跳到組件預覽標題
Github
https://github.com/weilanwl/ColorUI語雀知識庫
https://www.yuque.com/coloruiPS：語雀是一個適合個人和團隊的高質(zhì)量文檔知識管理庫
在Uniapp中開發(fā)
在最新版本的HBuilderX開發(fā)工具中已經(jīng)自帶了項目模板，可以通過這個項目模板進行開發(fā)，當然也可以單獨使用
下面是不通過模板單獨引入
下載源碼解壓獲得/Colorui-UniApp文件夾，復制目錄下的 /colorui 文件夾到你的項目根目錄
App.vue 引入關(guān)鍵Css main.css icon.css
- 使用自定義導航欄
導航欄作為常用組件有做簡單封裝，當然你也可以直接復制代碼結(jié)構(gòu)自己修改，達到個性化目的。
App.vue 獲得系統(tǒng)信息
onLaunch: function() {uni.getSystemInfo({success: function(e) {// #ifndef MPVue.prototype.StatusBar = e.statusBarHeight;if (e.platform == 'android') {Vue.prototype.CustomBar = e.statusBarHeight + 50;} else {Vue.prototype.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINVue.prototype.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();Vue.prototype.Custom = custom;Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif// #ifdef MP-ALIPAYVue.prototype.StatusBar = e.statusBarHeight;Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;// #endif}})},- pages.json 配置取消系統(tǒng)導航欄
"globalStyle": {"navigationStyle": "custom"},復制代碼結(jié)構(gòu)可以直接使用，注意全局變量的獲取。
- 使用封裝,在main.js 引入 cu-custom 組件。
import cuCustom from './colorui/components/cu-custom.vue'Vue.component('cu-custom',cuCustom)page.vue 頁面可以直接調(diào)用了
返回 導航欄 原生使用
下載源碼解壓獲得/demo，復制目錄下的 /colorui 文件夾到你的項目根目錄
App.wxss 引入關(guān)鍵Css main.wxss icon.wxss
@import "colorui/main.wxss";@import "colorui/icon.wxss";@import "app.css"; /* 你的項目css */....從新項目開始
下載源碼解壓獲得/template，復制/template并重命名為你的項目，導入到小程序開發(fā)工具既可以開始你的新項目了
- 使用自定義導航欄
導航欄作為常用組件有做簡單封裝，當然你也可以直接復制代碼結(jié)構(gòu)自己修改，達到個性化目的。
App.js 獲得系統(tǒng)信息
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; } })},App.json 配置取消系統(tǒng)導航欄,并全局引入組件
"window": {"navigationStyle": "custom"},"usingComponents": { "cu-custom":"/colorui/components/cu-custom"}page.wxml 頁面可以直接調(diào)用了
返回 導航欄 組件預覽
- 基礎(chǔ)元素部分
- 交互組件
- 擴展插件
總結(jié)
以上就是幾乎所有的ColorUI組件，感興趣的可以直接查看官方demo，顏值相當高！enjoy it！
推薦閱讀：是oppo手機好還是vivo手機好
