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