微信小程序-使用ColorUI

一、说明与使用

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。