小程序colorui引入与使用

偏执的太偏执、 2023-03-03 12:29 22阅读 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 条评论，22人围观）

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

相关阅读

相关【微信小程序6】引入第三方UI的方法（ColorUi）

小程序的ColorUI是基于原生开发的一套非常优秀的UI。能够让我们在开发过程中，很好、很契合地使用。具体介绍参考ColorUI官方网址：[http://docs.xzeu.c

红太狼/ 2024年03月16日 16:40/ 0 赞/ 8 阅读

相关小程序iconfont图标引入，小程序使用背景图。

小程序引入iconfont和使用背景图一、小程序引入iconfont图标。二、小程序引入使用背景图片。一、

缺乏、安全感/ 2023年06月07日 08:26/ 0 赞/ 11 阅读

相关小程序colorui引入与使用

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

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

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

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

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

相关小程序组件库ColorUI教程

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

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

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

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

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

相关微信小程序使用colorui

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

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

相关微信小程序+ColorUI

官网 1、[Color UI | 下载包][Color UI _] 2、[语雀文档 ColorUI 群资源][ColorUI] 3、[Github ColorUI 鲜

逃离我推掉我的手/ 2022年10月12日 15:47/ 0 赞/ 13 阅读

相关 ColorUI 使用文档

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

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

相关小程序——colorUI库初识

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

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