小程式原生高顏值元件庫--ColorUI元件庫
摘要：
簡介
ColorUI是一個Css類的UI元件庫！不是一個Js框架。相比於同類小程式元件庫，ColorUI更注重於視覺互動！
瀏覽GitHub：https://github.com/weilanwl/ColorUI
如何使用？
先下載原...
簡介
ColorUI是一個Css類的UI元件庫！不是一個Js框架。相比於同類小程式元件庫，ColorUI更注重於視覺互動！
瀏覽GitHub：https://github.com/weilanwl/ColorUI
如何使用？
先下載原始碼包
→ Github
引入到我的小程式
將 /demo/ 下的 colorui.wxss 和 icon.wxss 複製到小程式的根目錄下
在 app.wxss 引入兩個檔案
@import "icon.wxss"; @import "colorui.wxss"; 複製程式碼
使用模板全新開發
複製 /template/ 資料夾並重命名為你的專案，微信開發者工具匯入為小程式就可以使用ColorUI了
體驗沉浸式導航
App.js
獲取系統引數並寫入全域性引數。
//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頁面配置獲取全域性引數。
//Page.js
const app = getApp()
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom
}
})
複製程式碼
Page.wxml 頁面構造導航。更多導航樣式請下載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>
複製程式碼
自定義系統Tabbar
按照官方自定義 tabBar 配置好Tabbar (開發工具和版本庫請使用最新版)。
使用ColorUI配置Tabbar只需要更改 Wxml 頁的內容即可。 更多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樣式庫，包含了開發常用的元素和元件，元素元件之間也能相互巢狀使用。我也會不定期更新一些擴充套件到原始碼。
感謝閱讀。