ColorUI-高颜值组件库

最新推荐文章于 2024-08-22 11:37:59 发布
最新推荐文章于 2024-08-22 11:37:59 发布
阅读量1.8w 收藏 15
点赞数 1
分类专栏： 微信小程序 文章标签： ColorUI 
      版权声明：本文为博主原创文章，未经博主允许不得转载。          https://blog.csdn.net/ChibiMarukoChan/article/details/89636610        </div>
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
                          <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
      <div class="htmledit_views" id="content_views">
        <h3><a name="t0"></a>一、说明与使用</h3>

ColorUI是一个css库。（开发者才18岁，大牛~）如果使用原生小程序开发，从https://github.com/weilanwl/ColorUI/下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录（与pages目录同级）。

目录结构如下：

 在app.wxss 引入关键Css :main.wxss ,icon.wxss


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

同时在微信开发者工具中，打开ColorUI2.0-demo，效果如下所示：

二、常见场景使用

选择你需要的样式，找到对应的.WXML，复制需要样式的代码到你需要的页面即可。

  • 比如常见的搜索框：

     


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <view 
     
     class=
     
     "cu-bar bg-white search fixed" style=
     
     "top:{{CustomBar}}px">
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <view class="search-form round">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <text class="icon-search">
     
     </text>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <input type="text" placeholder="搜索" confirm-type="search" bindinput="searchIcon">
     
     </input>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </view>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <
     
     /view>
  • 比如消息或者富矿状态下的数字标签类别：

       


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <view 
     
     class=
     
     "padding flex justify-between align-center">
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         港
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "cu-tag badge">
     
     99+</view>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "cu-avatar xl radius" style=
     
     "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "cu-tag badge">
     
     9</view>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "cu-tag badge"></view>
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <text 
     
     class=
     
     "icon-people"></text>
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "cu-avatar xl radius">
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "cu-tag badge">
     
     99+</view>
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </view>
  • 比如特殊样式的底部导航栏：

        


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <view 
     
     class=
     
     "cu-bar tabbar margin-bottom-xl bg-white">
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "action text-green">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "icon-homefill"></view> 首页
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "action text-gray">
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "icon-similar"></view> 分类
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "action text-gray add-action">
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <button 
     
     class=
     
     "cu-btn icon-add bg-green shadow"></button>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         发布
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "action text-gray">
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "icon-cart">
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           <view 
     
     class=
     
     "cu-tag badge">
     
     99</view>
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         </view>
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         购物车
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       <view 
     
     class=
     
     "action text-gray">
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <view 
     
     class=
     
     "icon-my">
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           <view 
     
     class=
     
     "cu-tag badge"></view>
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         </view>
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         我的
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       </view>
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </view>

  更多操作，请参考ColorUI2.0-demo。

Blank_Tt
关注
专栏目录
微信小程序-colorUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-12 1万+
之前记录了weUI组件库的基础使用，现在用一下更加【漂酿】的colorUI，weUI组件库的博客在这里：微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884 相较于weUI和原生微信小程序样式的统一，colorUI更注重于【个性】，它的样式很动感，blingbling的，比较适合做一些活泼的活动小程序 ...
微信小程序-colorUI组件库-自定义tabBar
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-13 2775
首先，我们需要了解一下，微信小程序中构造页面的两种方式 官方文档：注册页面 | 微信开放文档 (qq.com) 使用 Page 构造器注册页面 Page({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { //
ColorUI-小程序原生高颜值组件库--ColorUI组件库.zip
09-23
简介hi!开发者！ColorUI迎来了2.0的升级，相比之前的版本，2.0版本重构了基础代码，增加了更多的配色，这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！项目为个人开源项目，如果项目有帮到你，希望能支持下开发者。使用下载源码包可得到 Demo 和 Template 两个项目， Demo 包含所有组件源码。 Template 是一个已经引用了ColorUI的空白模板。Demo 即文档。在线文档 编写中...交流微信群：加入微信群请先添加开发者微信，备注GitHub。QQ群：240787041 或扫描二维码。
贼好用的Uniapp的UI组件库Thor UI
weixin_68658847的博客
08-22 689
贼好用的Uniapp的UI组件库Thor UI
【微信小程序】ColorUI——一个多彩漂亮的UI组件库
一个记录积累的地方
02-21 6415
文章目录前言一、使用方法1.下载2.将压缩包中demo里的colorui文件夹拷到项目目录3.在app.wxss中引入文件4.根据DEMO使用二、踩坑1.动画的使用 前言 作为一个毫无审美的钢铁直男，一个漂亮的UI组件库拯救了我糟糕的前端页面。ColorUI是一个国内大佬写的UI组件库，由于缺少使用文档，所以在使用的过程中难免会出现一些问题，开个坑MARK一下。 一、使用方法 由于我是开发微信小程序使用，因此以小程序为例 1.下载 点击前往 2.将压缩包中demo里的colorui文件夹拷到项目目录 3..
ColorUI高颜值组件库，传授使用速成的方法和快速脱坑的技巧，顺便填坑
qq_40982347的博客
08-13 8493
ColorUI速成 简单介绍 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！这个组件以高颜值而得到推广，深受开发者的喜爱，由作者文晓港创作，目前仅更新到2.0版本。 GitHub资源地址：https://github.com/weilanwl/ColorUI 优势 一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎...
ColorUI-UniApp：构建跨平台应用的高颜值CSS组件库
chenchuang0128的博客
06-04 5641
ColorUI-UniApp作为一款高颜值、高度自定义的CSS组件库，为跨平台应用开发提供了强大的支持。其丰富的组件、美观的设计和高度的自定义性使得它成为前端开发者的得力助手。
ColorUI-UniApp组件库使用笔记
前端视听
05-28 3580
uniapp里面的一个UI组件库 https://ext.dcloud.net.cn/plugin?id=239 这是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库 使用教程 项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。 1:从github上下载 https://github.com/weilanwl/ColorUI 2：将ColorUI-UniApp里面的文件夹colorui导入自己的项目 3：打开App.
小程序组件库ColorUI教程
前端视听
08-18 2343
在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 颜值很高，注重颜值的程序员，可以选择考虑一下哦。 github地址： https://github.com/weilanwl/ColorUI 在色彩设计上，都是非常的好看，非常的丰富的。 今天在做小程序 的时候，由于自己的页面需求的卡片，列表，以及ui色彩搭配都和这个框架里面所提供的组件都高度契合，之前做app开发的时候也一直在用
小程序最好用的组件库ColorUI，强烈推荐使用，复制黏贴一级棒
前端视听
07-16 2041
在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 颜值很高，注重颜值的程序员，可以选择考虑一下哦。 github地址：https://github.com/weilanwl/ColorUI 在色彩设计上，都是非常的好看，非常的丰富的。 今天在做小程序 的时候，由于自己的页面需求的卡片，列表，以及ui色彩搭配都和这个框架里面所提供的组件都高度契合，之前做app开发的时候也
微信小程序Color UI组件库
12-27
ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！
微信小程序colorui组件库自定义导航栏和tabbar
04-24
微信小程序引入colorui组件库，自定义导航栏和tabbar，仅用于个人记录学习之用
微信小程序colorUI组件库的通用css
08-13
压缩包里面包含icon.css和main.css两个文件，是colorUI组件库的通用css，自行新建一个文件夹存在，从微信小程序的全局样式那引入即可
ColorUI_UniApp_html_uniapp_js_DEMO_colorui_
10-03
ColorUI uniapp this is a test demo
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
已经封装好request请求，api模块化管理，页面水印，cds请求等各种常用的js
80个高品质UI设计组件 Adobe XD
07-19
内含80个高品质的UI设计组件 Adobe XD设计专用 Adobe XD设计专用
引入ColorUI组件库
weixin_42171832的博客
05-11 190
2.文件夹内直接把zip文件夹解压，开发者工具打开将demo文件夹作为目录导入就ok~后面会陆续在公众号内发一些关于小程序的相关应用流程~1.去github的这个地址下面直接下载zip文件。先别管错误信息，很多都是服务器的问题，与你无瓜。对小程序感兴趣，可以关注公众号：程序之间的贸易。
api 微信小程序组件库colorui_小程序原生高颜值组件库--ColorUI组件库
weixin_42315341的博客
01-17 282
image简介ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！image如何使用？先下载源码包引入到我的小程序将 /demo/ 下的 colorui.wxss 和 icon.wxss 复制到小程序的根目录下在 app.wxss 引入两个文件@import "icon.wxss";@import "colorui.wxss";使用模...
小程序高颜值组件库colorUI
weixin_42178050的博客
08-02 448
https://baijiahao.baidu.com/s?id=1626443376482972932&wfr=spider&for=pc https://www.color-ui.com/
WX小程序-VantWeapp组件库样式修改
最新发布
10-10
VantWeapp是一个基于微信小程序生态的开源UI组件库，它提供了一套简洁、易用的样式和功能模块，帮助开发者快速构建美观的小程序应用。若需要对VantWeapp组件库进行样式修改，通常有以下步骤： 1. **全局主题修改**...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值