快速上手colorUI

首先传送门 colorUi下载地址：https://github.com/weilanwl/ColorUI

前言：今天下载colorUi下来看了下组件还挺齐全，UI效果视觉上看着在众多框架中脱颖而出，于是下过来看了下，基本上知道了怎么用的。

首页.png

上手原生小程序

底部tab
底部tab没有直接写在app.json里边，而是写在了index.wxml里边，就是下边这段代码。

<basics wx:if="{{PageCur=='basics'}}"></basics>
<component wx:if="{{PageCur=='component'}}"></component>
<plugin wx:if="{{PageCur=='plugin'}}"></plugin>
<about wx:if="{{PageCur=='about'}}"></about>
<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action" bindtap="NavChange" data-cur="basics">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="component" data-a="hahha">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='component'?'text-green':'text-gray'}}">组件</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="plugin">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">扩展</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="about">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='about'?'text-green':'text-gray'}}">关于</view>
  </view>
</view>

把点击tab(元素，组件，扩展，关于)4个页面对应的首页，分别通过组件(下方代码)的方式引入。通过NavChange方法监听自定义的tab点击事件，动态获取点击元素上的data-cur属性从而来判断加载哪一个tab。

{
  "usingComponents": {
    "basics": "/pages/basics/home/home",
    "component": "/pages/component/home/home",
    "plugin": "/pages/plugin/home/home",
    "about": "/pages/about/home/home"
  }
}

头部菜单

头部.jpg

也是自定义的方式，在app.json中，通过设置

"navigationStyle": "custom"

这样的话只剩下一个右边的胶囊了，通过设置来自定义了头部，就可以根据需求设置多样化的头部了，这个个人蛮喜欢的。

 "usingComponents": {
    "cu-custom":"/colorui/components/cu-custom"
  }

在app中引入colorUI的样式
在app.wxss中加上就完成了它的样式引用。
@import "colorui/main.wxss";@import "colorui/icon.wxss";
关于样式main.wxss中var(),--red: #e54d42;的使用

--XX定义一个样式常量，这种都会写在根节点上，colorUi写在了page样式下，或者伪类:root下。
比如颜色，就可以color: var(--XX) ;来使用了
还不明白的话var语法传送门： https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

快速上手colorUI

上手原生小程序

推荐阅读更多精彩内容