一、說明與使用

ColorUI是一個css庫。如果使用原生小程序開發，從https://github.com/weilanwl/ColorUI/下載源碼解壓獲得/demo，復制目錄下的?/colorui?文件夾到你的項目根目錄（與pages目錄同級）。

目錄結構如下：

?在app.wxss?引入關鍵Css :main.wxss?,icon.wxss

/**app.wxss**/ @import "colorui/main.wxss"; @import "colorui/icon.wxss";

同時在微信開發者工具中，打開ColorUI2.0-demo，效果如下所示：

二、常見場景使用

選擇你需要的樣式，找到對應的.WXML，復制需要樣式的代碼到你需要的頁面即可。

• 比如常見的搜索框：

? ? ?

<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px"><view class="search-form round"><text class="icon-search"></text><input type="text" placeholder="搜索" confirm-type="search" bindinput="searchIcon"></input></view> </view>

• 比如消息或者富礦狀態下的數字標簽類別：

? ? ? ?

<view class="padding flex justify-between align-center"><view class="cu-avatar xl radius">港<view class="cu-tag badge">99+</view></view><view class="cu-avatar xl radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"><view class="cu-tag badge">9</view></view><view class="cu-avatar xl radius"><view class="cu-tag badge"></view><text class="icon-people"></text></view><view class="cu-avatar xl radius"><view class="cu-tag badge">99+</view></view> </view>

• 比如特殊樣式的底部導航欄：

? ? ? ??

<view class="cu-bar tabbar margin-bottom-xl bg-white"><view class="action text-green"><view class="icon-homefill"></view> 首頁</view><view class="action text-gray"><view class="icon-similar"></view> 分類</view><view class="action text-gray add-action"><button class="cu-btn icon-add bg-green shadow"></button>發布</view><view class="action text-gray"><view class="icon-cart"><view class="cu-tag badge">99</view></view>購物車</view><view class="action text-gray"><view class="icon-my"><view class="cu-tag badge"></view></view>我的</view> </view>

? 更多操作，請參考ColorUI2.0-demo。

總結

以上是生活随笔為你收集整理的微信小程序-使用ColorUI的全部內容，希望文章能夠幫你解決所遇到的問題。

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