小程序colorui引入与使用

偏执的太偏执、 2023-03-03 12:29 5阅读 0赞

*  在小程序的组件库里面，colorui的效果还是非常不错，拥有非常多的轮子  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]

# colorui的示例 #

*  在github下载[colorui包][colorui]，其中demo文件夹为小程序文件，可以直接导入到微信开发工具直接运行，目录结构如下，运行效果如上图，可以查看各个模块的效果  
    ![在这里插入图片描述][20200731153551349.png]

# colorui引入小程序 #

*  新建小程序，将`colorui`文件拷贝到小程序根目录，在`app.wxss`中引入

@import 'colorui/main.wxss';
    @import 'colorui/icon.wxss';
    @import 'colorui/animation.wxss';

*  查看示例的`tabbar`写法，示例`index.wxml`，`js`文件就不贴了
 *  小程序默认设置为`index`页面，tabbar默认显示，点击修改`PageCur`的值，上面写上组件，显示`PageCur`对应的组件，就完成了页面切换

<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">
        <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]: /images/20230208/776f1875fff24b2595e05a7fef1cfd6b.png
[colorui]: https://github.com/weilanwl/ColorUI
[20200731153551349.png]: /images/20230208/05a253dc75dd48b493740647a1457638.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序colorui引入与使用

在小程序的组件库里面，colorui的效果还是非常不错，拥有非常多的轮子 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

偏执的太偏执、/ 2023年03月03日 12:29/ 0 赞/ 6 阅读

相关小程序ColorUI使用简易教程

本教程配合[官方示例][Link 1]食用更佳！！！目录 [前言][Link 2] [快速上手][Link 3] [使用UniApp开发][UniApp] [开始]

柔情只为你懂/ 2022年11月29日 12:54/ 0 赞/ 1225 阅读

相关小程序组件库ColorUI教程

在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！

骑猪看日落/ 2022年11月28日 13:50/ 0 赞/ 2030 阅读

相关小程序如何引入插件Vant库，ColorUI库，iView库

1.首先需要下载 Vant下载地址：https://github.com/swx980/Vant-Weapp.git ColorUI下载地址：https://github.

清疚/ 2022年11月26日 15:56/ 0 赞/ 341 阅读

相关微信小程序使用colorui

一，下载colorui源码 [官方网站：https://www.color-ui.com/][https_www.color-ui.com] [GitHub：http

蔚落/ 2022年11月20日 04:59/ 0 赞/ 759 阅读

相关 ColorUI 使用文档

ColorUI 简易使用文档友情链接文本大小颜色图片头像边距辅助样式阴影布局列表友

绝地灬酷狼/ 2022年09月03日 07:20/ 0 赞/ 894 阅读

相关 axios引入小程序

下载插件 yarn add axios service.js // service.js文件 import Vue from 'vue'

曾经终败给现在/ 2022年09月01日 14:57/ 0 赞/ 182 阅读

相关 colorUI框架使用教程

\-----------------------------------------------------2021/08/22更新----------------------

╰半橙微兮°/ 2022年03月10日 09:47/ 0 赞/ 2085 阅读

相关小程序——colorUI库初识

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

桃扇骨/ 2021年07月25日 21:26/ 0 赞/ 482 阅读

相关微信小程序——ColorUI快速开发首页手记

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2021年07月25日 17:12/ 0 赞/ 512 阅读