開源推薦！注重視覺交互的高顏值第三方組件庫--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({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.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樣式庫，包含了開發常用的元素和組件，元素組件之間也能相互嵌套使用。我也會不定期更新一些擴展到源碼。

其實大家都在催我寫文檔，但這個庫源碼就在這，所見即所得，粘貼復制就可以得到你想要的頁面。當然，文檔我還是要寫的，也希望大家多多提意見。

現在前端的開發方向基本都是奔著Js方向的，布局和樣式大家討論的有點少。以后我會在開發者社區多聊一聊關于開發中的布局和樣式。

總結

以上是生活随笔為你收集整理的colorui开发文档_小程序原生高颜值组件库--ColorUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。