精华内容
下载资源
问答
  • ColorUI 使用文档

    千次阅读 2021-08-06 10:28:46
    ColorUI 简易 使用文档 友情链接 文本大小 颜色 图片 头像 边距 布局 列表 友情链接 ColorUI使用文档 看云: https://www.kancloud.cn/als24/color/1141392 ColorUI H5 H5: http://demo.color-ui.com/h5.html#/ ...

    ColorUI 简易 使用文档

    • 友情链接
    • 文本大小
    • 颜色
    • 图片
    • 头像
    • 边距
    • 辅助样式
    • 阴影
    • 布局
    • 列表

    友情链接

    ColorUI使用文档

    看云: https://www.kancloud.cn/als24/color/1141392

    ColorUI H5

    H5: http://demo.color-ui.com/h5.html#/

    参考文章链接

    简书: https://www.jianshu.com/p/450527d7239a#comments

    文本大小

    xssmdflgxlxxlslxsl
    20upx24upx28upx32upx36upx44upx80upx120upx
    10px12px14px16px18px22px40px60px
    /* 大小 */
    .text-xs{font-size:20upx}
    .text-sm{font-size:24upx}
    .text-df{font-size:28upx}
    .text-lg{font-size:32upx}
    .text-xl{font-size:36upx}
    .text-xxl{font-size:44upx}
    .text-sl{font-size:80upx}
    .text-xsl{font-size:120upx}
    
    /* 特殊 */
    .text-Abc{text-transform:Capitalize}
    .text-ABC{text-transform:Uppercase}
    .text-abc{text-transform:Lowercase}
    .text-price::before{content:"¥";font-size:80%;margin-right:4upx}
    .text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
    .text-bold{font-weight:700}
    .text-center{text-align:center}
    .text-content{line-height:1.6}
    .text-left{text-align:left}
    .text-right{text-align:right}
    

    颜色

    文字颜色

    .line-red,.lines-red,.text-red{color:#e54d42}
    .line-orange,.lines-orange,.text-orange{color:#f37b1d}
    .line-yellow,.lines-yellow,.text-yellow{color:#fbbd08}
    .line-olive,.lines-olive,.text-olive{color:#8dc63f}
    .line-green,.lines-green,.text-green{color:#39b54a}
    .line-cyan,.lines-cyan,.text-cyan{color:#1cbbb4}
    .line-blue,.lines-blue,.text-blue{color:#0081ff}
    .line-purple,.lines-purple,.text-purple{color:#6739b6}
    .line-mauve,.lines-mauve,.text-mauve{color:#9c26b0}
    .line-pink,.lines-pink,.text-pink{color:#e03997}
    .line-brown,.lines-brown,.text-brown{color:#a5673f}
    .line-grey,.lines-grey,.text-grey{color:#8799a3}
    .line-gray,.lines-gray,.text-gray{color:#aaa}
    .line-black,.lines-black,.text-black{color:#333}
    .line-white,.lines-white,.text-white{color:#fff}
    

    背景颜色

    .bg-red{background-color:#e54d42;color:#fff}
    .bg-orange{background-color:#f37b1d;color:#fff}
    .bg-yellow{background-color:#fbbd08;color:#333}
    .bg-olive{background-color:#8dc63f;color:#fff}
    .bg-green{background-color:#39b54a;color:#fff}
    .bg-cyan{background-color:#1cbbb4;color:#fff}
    .bg-blue{background-color:#0081ff;color:#fff}
    .bg-purple{background-color:#6739b6;color:#fff}
    .bg-mauve{background-color:#9c26b0;color:#fff}
    .bg-pink{background-color:#e03997;color:#fff}
    .bg-brown{background-color:#a5673f;color:#fff}
    .bg-grey{background-color:#8799a3;color:#fff}
    .bg-gray{background-color:#f0f0f0;color:#333}
    .bg-black{background-color:#333;color:#fff}
    .bg-white{background-color:#fff;color:#666}
    
    .light{}
    
    .bg-gradual-red{background-image:linear-gradient(45deg,#f43f3b,#ec008c);color:#fff}
    .bg-gradual-orange{background-image:linear-gradient(45deg,#ff9700,#ed1c24);color:#fff}
    .bg-gradual-green{background-image:linear-gradient(45deg,#39b54a,#8dc63f);color:#fff}
    .bg-gradual-purple{background-image:linear-gradient(45deg,#9000ff,#5e00ff);color:#fff}
    .bg-gradual-pink{background-image:linear-gradient(45deg,#ec008c,#6739b6);color:#fff}
    .bg-gradual-blue{background-image:linear-gradient(45deg,#0081ff,#1cbbb4);color:#fff}
    

    图片

    <view class="bg-img bg-mask" style="background-image: url('')">
      遮罩
    </view>
    
    <view class="bg-img" style="background-image: url('')">
      透明
    </view>
    
    <view class="bg-img" style="background-image: url()"></view>
    <view class="bg-img" :style="'background-image: url(' + i.img + ')'"></view>
    

    头像

    roundradiussmdflgxl
    圆角48upx64upx96upx128upx
    24px32px48px64px
    <view class="cu-avatar"></view>
    
    <view class="cu-avatar">文字图标</view>
    
    <view class="cu-avatar"><text>图标</text></view>
    
    <view class="cu-avatar" style="background-image: url()"></view>
    <view class="cu-avatar" :style="'background-image: url(' + i.img + ')'"></view>
    
    <!-- 其他 -->
    

    边距

    xssmdflgxl
    10upx20upx30upx40upx50upx
    5px10px15px20px25px

    margin

    .margin-0{margin:0}
    .margin-xs{margin:10upx}
    .margin-sm{margin:20upx}
    .margin{margin:30upx}
    .margin-lg{margin:40upx}
    .margin-xl{margin:50upx}
    .margin-top-xs{margin-top:10upx}
    .margin-top-sm{margin-top:20upx}
    .margin-top{margin-top:30upx}
    .margin-top-lg{margin-top:40upx}
    .margin-top-xl{margin-top:50upx}
    .margin-right-xs{margin-right:10upx}
    .margin-right-sm{margin-right:20upx}
    .margin-right{margin-right:30upx}
    .margin-right-lg{margin-right:40upx}
    .margin-right-xl{margin-right:50upx}
    .margin-bottom-xs{margin-bottom:10upx}
    .margin-bottom-sm{margin-bottom:20upx}
    .margin-bottom{margin-bottom:30upx}
    .margin-bottom-lg{margin-bottom:40upx}
    .margin-bottom-xl{margin-bottom:50upx}
    .margin-left-xs{margin-left:10upx}
    .margin-left-sm{margin-left:20upx}
    .margin-left{margin-left:30upx}
    .margin-left-lg{margin-left:40upx}
    .margin-left-xl{margin-left:50upx}
    .margin-lr-xs{margin-left:10upx;margin-right:10upx}
    .margin-lr-sm{margin-left:20upx;margin-right:20upx}
    .margin-lr{margin-left:30upx;margin-right:30upx}
    .margin-lr-lg{margin-left:40upx;margin-right:40upx}
    .margin-lr-xl{margin-left:50upx;margin-right:50upx}
    .margin-tb-xs{margin-top:10upx;margin-bottom:10upx}
    .margin-tb-sm{margin-top:20upx;margin-bottom:20upx}
    .margin-tb{margin-top:30upx;margin-bottom:30upx}
    .margin-tb-lg{margin-top:40upx;margin-bottom:40upx}
    .margin-tb-xl{margin-top:50upx;margin-bottom:50upx}
    

    padding

    .padding-0{padding:0}
    .padding-xs{padding:10upx}
    .padding-sm{padding:20upx}
    .padding{padding:30upx}
    .padding-lg{padding:40upx}
    .padding-xl{padding:50upx}
    .padding-top-xs{padding-top:10upx}
    .padding-top-sm{padding-top:20upx}
    .padding-top{padding-top:30upx}
    .padding-top-lg{padding-top:40upx}
    .padding-top-xl{padding-top:50upx}
    .padding-right-xs{padding-right:10upx}
    .padding-right-sm{padding-right:20upx}
    .padding-right{padding-right:30upx}
    .padding-right-lg{padding-right:40upx}
    .padding-right-xl{padding-right:50upx}
    .padding-bottom-xs{padding-bottom:10upx}
    .padding-bottom-sm{padding-bottom:20upx}
    .padding-bottom{padding-bottom:30upx}
    .padding-bottom-lg{padding-bottom:40upx}
    .padding-bottom-xl{padding-bottom:50upx}
    .padding-left-xs{padding-left:10upx}
    .padding-left-sm{padding-left:20upx}
    .padding-left{padding-left:30upx}
    .padding-left-lg{padding-left:40upx}
    .padding-left-xl{padding-left:50upx}
    .padding-lr-xs{padding-left:10upx;padding-right:10upx}
    .padding-lr-sm{padding-left:20upx;padding-right:20upx}
    .padding-lr{padding-left:30upx;padding-right:30upx}
    .padding-lr-lg{padding-left:40upx;padding-right:40upx}
    .padding-lr-xl{padding-left:50upx;padding-right:50upx}
    .padding-tb-xs{padding-top:10upx;padding-bottom:10upx}
    .padding-tb-sm{padding-top:20upx;padding-bottom:20upx}
    .padding-tb{padding-top:30upx;padding-bottom:30upx}
    .padding-tb-lg{padding-top:40upx;padding-bottom:40upx}
    .padding-tb-xl{padding-top:50upx;padding-bottom:50upx}
    

    辅助样式

    实线

    .solid,
    
    .solid-top,
    
    .solid-right,
    
    .solid-bottom,
    
    .solid-left
    

    虚线

    。dashed
    

    阴影

    翘边阴影:shadow-warp
    长阴影: shadow-blur

    布局

    flex

    .flex{display:flex}
    
    /* 对齐 */
    .justify-start{justify-content:flex-start}
    .justify-end{justify-content:flex-end}
    .justify-center{justify-content:center}
    .justify-between{justify-content:space-between}
    .justify-around{justify-content:space-around}
    .align-start{align-items:flex-start}
    .align-end{align-items:flex-end}
    .align-center{align-items:center}
    .align-stretch{align-items:stretch}
    
    /* 其他 */
    .flex-direction{flex-direction:column}
    .flex-wrap{flex-wrap:wrap}
    
    /* 固定尺寸 */
    .basis-xs{flex-basis:20%}
    .basis-sm{flex-basis:40%}
    .basis-df{flex-basis:50%}
    .basis-lg{flex-basis:60%}
    .basis-xl{flex-basis:80%}
    
    /* 比例分布*/
    .flex-sub{flex:1}
    .flex-twice{flex:2}
    .flex-treble{flex:3}
    
    /* 自对齐 */
    .self-start{align-self:flex-start}
    .self-center{align-self:flex-center}
    .self-end{align-self:flex-end}
    .self-stretch{align-self:stretch}
    .align-stretch{align-items:stretch}
    

    grid

    col-1col-2col-3col-4col-5
    1等分列2等分列3等分列4等分列5等分列
    <view class="grid col-2">
        <view>等分</view>
      <view></view>
    </view>
    
    <view class="grid col-2 grid-square">
        <view>等高</view>
      <view></view>
    </view>
    

    列表

    sm-bordercard-menuarrow
    短边框卡片箭头
    <view class="cu-list menu">
      <view class="cu-item">
        <view class="content">
          <text class="cuIcon-circlefill text-grey"></text>
          <text class="text-grey">图标 + 标题</text>
        </view>
      </view>
      
      <view class="cu-item">
        <view class="content">
          <image src="/static/logo.png" class="png" mode="aspectFit"></image>
          <text class="text-grey">图片 + 标题</text>
        </view>
      </view>
      
      <view class="cu-item">
        <button class="cu-btn content" open-type="contact">
          <text class="cuIcon-btn text-olive"></text>
          <text class="text-grey">Open-type 按钮</text>
        </button>
      </view>
      
      <view class="cu-item">
        <navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
          <text class="cuIcon-discoverfill text-orange"></text>
          <text class="text-grey">Navigator 跳转</text>
        </navigator>
      </view>
      
      <view class="cu-item">
        <view class="content">
          <text class="cuIcon-warn text-green"></text>
          <text class="text-grey">文本</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">小目标还没有实现!</text>
        </view>
      </view>
    </view>
    
    展开全文
  • colorUI是一个非常好看的css库,借用相关介绍:ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互! 二、引入步骤:     1.下载colorUI:  ...

    一、前言:
        colorUI是一个非常好看的css库,借用相关介绍:ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
    二、引入步骤:
        1.下载colorUI:
        进入colorUI的github地址进行下载。

        2.拷贝colorUI中\demo\colorui目录下的icon.wxss和main.wxss文件到项目根目录下。
    在这里插入图片描述
        3.在app.wxss中引入这两个文件即可。

    /* 引入colorUI样式 */
    @import "/icon.wxss";
    @import "/main.wxss";
    
    展开全文
  • 最近在做一个微信小程序,里面涉及了大量表单组件(如:input、picker、radio)的提交、预览,以及九宫格视频、图片的添加、回显,又看到colorUI这个ui库,感觉挺符合我审美,封装的也很好,最终决定在colorUI的基础...

    前言

    一、内容

    二、先看效果

    1.input目前支持的动态配置

    2.配置代码

    3.效果展示 

    三、详细步骤 

    0.引入colorUI

    1.引入aw

    2.使用

    3.增加校验

    现在我们模拟一个提交数据前的验证看是否成功

    三、全部代码

    总结

     

    前言

    最近在做一个微信小程序,里面涉及了大量表单组件(如:input、picker、radio)的提交、预览,以及九宫格视频、图片的添加、回显,又看到 colorUI 这个ui库,感觉挺符合我审美,封装的也很好,最终决定在colorUI的基础上再封装一下,增加业务逻辑,使之更契合实际开发项目。

    本着记录并回顾学习的心态写下这篇文章,同时如果大家有相同的业务需求,欢迎大家使用,当然,如果可以给我star那就更感谢了。

    使用方法相当简单,只需要在项目中引入该组件库,再进行简单的数组配置(一条json就是一个表单组件),就能轻松实现数据驱动视图。


    一、内容

    1. 本篇讲述input的封装,后续将陆续添加picker、radio、checkbox、textarea、九宫格图片等;
    2. 因为博主本人也是新手,所以讲的也会更入门向一点,纯手摸手教学,同时欢迎大佬指点。

    二、先看效果

    1.input目前支持的动态配置

    /**
         * 当且仅当 type === 'input' 显示该组件
         * 
         * ---参数说明---
         * topLine            默认没有上划线,可加
         * clearBottomLine    默认有下划线,可删
         * label              输入框标题(最多长度为6,溢出隐藏)
         * requied            是否必填(显示红星)
         * inputType          input框的类型,默认text
         * disabled           是否禁用
         * value              input值
         * password           是否是密码类型,默认为否
         * maxLen             input框最大长度,默认40
         * placeholder + noPlaceholder        默认为“‘请输入’ + 输入框标题(label)” 通过placeholder可自定义
         *                                    也可通过noPlaceholder 来清除默认placeholder
         * icon               input框右侧是否添加icon(color UI: 如:"cuIcon-locationfill",colorUI的图标)
         * iconColor          icon颜色,默认橘色 "text-orange"
         * BtnText            加按钮的文本(最多四字,溢出隐藏)
         * BtnBgCol           按钮的背景色
         * rule + message     结合“WxValidate.js” 验证输入文本是否符合规则
         * 
    */

    2.配置代码

    { label: '四个大字', submitName: 'name', type: 'input', inputType: 'text', value: '', requied: true, placeholder: '自定义placeholder',rule: { required: true },message: { required: '请输入用户名' }},
    { label: '最多支持六字', submitName: 'adress2', type: 'input', inputType: 'text', value: ''},
    { label: '再多就隐藏了呀', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '默认色'},
    { label: '按钮换个颜色', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '验证码呀', BtnBgCol: 'bg-red'},
    { label: '加个图标', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-locationfill' },
    { label: '图标换色', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-favorfill', iconColor: 'text-blue'}

    3.效果展示 

    • 配置完成后,只需要上述简单的代码,就可以得到下图红框的input
    • input输入内容后,会自动将内容发送到配置数组的 “value” 字段中
    • 再进行简单的规则配置,即可实现对输入内容的正则验证
    • 下面这张图的九宫格图片模块与选择框等模块,会在后续文章中持续输出


    三、详细步骤 

    0.引入colorUI

    • 由于本组件的ui主要用的是 colorUI ,所以先将 colorUI 应用到项目中,方法很简单,colorUI 的github描述的也很详细,在这里就不多赘述了

    1.引入aw

    • 去 码云、github项目中下载aw,将components中的form文件夹拉到你的项目里(不需要根目录,放在components下就可以)
    • 之后去app.json中的“usingComponents”里注册该组件(当然,也可以不注册全局组件,哪个页面用,在哪个页面注册也是可以的)
    • ok,到了这一步,已经成功一半了,接下来我们看下如何使用

    2.使用

    • 新建一个页面form,这就是要使用该组件的页面
    • 在form.wxml中添加如下代码
      <!--pages/form/form.wxml-->
      <view wx:for="{{form}}" wx:key="index">
        <aw-input wx:if="{{item.type === 'input'}}" formItem='{{item}}' index='{{index}}'></aw-input>
      </view>
    • 在form.js里添加如下代码

      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
          form: [
            { label: '四个大字', submitName: 'name', type: 'input', inputType: 'text', value: '', requied: true,    placeholder: '自定义placeholder',rule: { required: true },message: { required: '请输入用户名' }},
            { label: '最多支持六字', submitName: 'adress2', type: 'input', inputType: 'text', value: ''},
            { label: '再多就隐藏了呀', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '默认色'},
            { label: '按钮换个颜色', submitName: 'adress3', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '验证码呀', BtnBgCol: 'bg-red'},
            { label: '加个图标', submitName: 'adress4', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-locationfill' },
            { label: '图标换色', submitName: 'adres5s', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-favorfill', iconColor: 'text-blue'}
          ]
        },
      })
    • 上面步骤没有问题的话,现在form页面应该是这个样子

      在输入框输入文本之后,数据会自动同步到form.js里data.form中

     

    3.增加校验

    如果想对输入文本进行提交校验,我们只需要在onLoad函数中调用一个事先封装好的initValidate函数

    • 在下载的utils文件夹中找到“WxValidate.js” 和 “formMethods.js”,将这俩文件引入你的项目(需同目录下)
    • 在form.js中引入formMethods.js

      const formMethods = require('../../utils/formMethods.js')
    • 最后就可以在form.js 的 onLoad函数中调用该函数

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          // input验证
          formMethods.initValidate(this.data.form, this);
        },

    现在我们模拟一个提交数据前的验证看是否成功

    1. form.wxml增加提交按钮
      <!-- 点击该按钮验证是否符合规范 -->
      <button style="margin: 200px auto" bindtap="submitForm">提交</button>
    2. form.js增加submitForm方法 
      // 验证提交数据
        submitForm: function() {
          const self = this;
          const { form } = this.data;
          const formValidate = {};
          /**
           * submitName字段是唯一的,一般是与后端约定的数据提交的字段名
           * 例如:
           *    前端展示名称    后端存储名称
           *      姓名            name
           *      年龄            age
           *      性别            sex
           * */
          form.forEach(item => { formValidate[item.submitName] = item.value});
          /**
           * 传入表单数据,调用验证方法
           * !!!
           * requied为true时,会默认校验是否必填;当自己增加校验规则时,会覆盖该默认方法
           * */ 
          if (!self.WxValidate.checkForm(formValidate)) {
            const error = self.WxValidate.errorList[0];
            wx.showToast({ title: error.msg, icon: 'none' });
            return false
          };
          // 数据校验完毕,可发起提交请求
          wx.showToast({ title: '验证完毕' });
        },

    四、全部代码

    form.wxml

    <!--pages/form/form.wxml-->
    <view wx:for="{{form}}" wx:key="index">
      <aw-input wx:if="{{item.type === 'input'}}" formItem='{{item}}' index='{{index}}'></aw-input>
    </view>
    
    <!-- 点击该按钮验证是否符合规范 -->
    <button style="margin: 200px auto" bindtap="submitForm">提交</button>

    form.js

    // pages/form/form.js
    const formMethods = require('../../utils/formMethods.js')
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        form: [
          { label: '四个大字', submitName: 'name', type: 'input', inputType: 'text', value: '', requied: true,    placeholder: '自定义placeholder',rule: { required: true },message: { required: '请输入用户名' }},
          { label: '最多支持六字', submitName: 'adress2', type: 'input', inputType: 'text', value: ''},
          { label: '再多就隐藏了呀', submitName: 'adress', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '默认色'},
          { label: '按钮换个颜色', submitName: 'adress3', type: 'input', inputType: 'text', value: '', requied: true, BtnText: '验证码呀', BtnBgCol: 'bg-red'},
          { label: '加个图标', submitName: 'adress4', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-locationfill' },
          { label: '图标换色', submitName: 'adres5s', type: 'input', inputType: 'text', value: '', requied: true, icon: 'cuIcon-favorfill', iconColor: 'text-blue'}
        ]
      },
    
      // 验证提交数据
      submitForm: function() {
        const self = this;
        const { form } = this.data;
        const formValidate = {};
        /**
         * submitName字段是唯一的,一般是与后端约定的数据提交的字段名
         * 例如:
         *    前端展示名称    后端存储名称
         *      姓名            name
         *      年龄            age
         *      性别            sex
         * */
        form.forEach(item => { formValidate[item.submitName] = item.value});
        /**
         * 传入表单数据,调用验证方法
         * !!!
         * requied为true时,会默认校验是否必填;当自己增加校验规则时,会覆盖该默认方法
         * */ 
        if (!self.WxValidate.checkForm(formValidate)) {
          const error = self.WxValidate.errorList[0];
          wx.showToast({ title: error.msg, icon: 'none' });
          return false
        };
        // 数据校验完毕,可发起提交请求
        wx.showToast({ title: '验证完毕' });
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // input验证
        formMethods.initValidate(this.data.form, this);
      },
    })

    总结

    ok,到这里就正式结束了,感谢大家能看到这里,觉得觉得这个小组件还能用的话,请给我个star鼓励一下

    我会尽快整理出其他组件,再次感谢大家!

    展开全文
  • 一、项目中引入ColorUI ColorUI其实是一套小程序的CSS框架,最近使用的比较多,刚好在自定义底部导航栏遇到一些坑,特有以此推文。 微信小程序自定义底部导航条tabBar,有两种主流方式,一种是将TabBar页面和底部...

    一、项目中引入ColorUI

    ColorUI其实是一套小程序的CSS框架,最近使用的比较多,刚好在自定义底部导航栏遇到一些坑,特有以此推文。

    微信小程序自定义底部导航条tabBar,有两种主流方式,一种是将TabBar页面和底部导航条作为组件,进行模拟切换,但是严格来说这种方式不太适用于复杂场景,很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口,来实现接管系统TabBar,这也是本文的实现方法,能够完美复刻默认系统TabBar,更可增加自定义的功能实现。

    二、 通过文件复制引入

    1. 进入ColorUI 的GitHub,拉下所有代码,项目中有三个目录,一个是ColorUI-UniApp这个是uni-app版本,一个是demo完整的案例版本,一个是template初始开发版本,复制demo或者template文件夹中的ColorUI文件夹至项目根目录。

    2. app.wxss 引入关键css main.wxss和icon.wxss 即可。

      	@import "/colorui/main.wxss";
      	@import "/colorui/icon.wxss";
      

    三、app.json中配置系统tabBar

    虽然是自定义tabBar,但是tabBar的配置还是要有。

    	"tabBar": {
        "custom": true,	//app.json系统tabBar设置 "custom": true
        "list": [
          {
            "text": "首页",
            "pagePath": "pages/shouye/shouye",
            "iconPath": "/img/tabbar/home.png",
            "selectedIconPath": "/img/tabbar/home_cur.png"
          },
          {
            "text": "我的",
            "pagePath": "pages/mine/mine",
            "iconPath": "/img/tabbar/my.png",
            "selectedIconPath": "/img/tabbar/my_cur.png"
          }
        ],
        "usingComponents":{}
      },
    

    四、在项目根目录新建custom-tab-bar组件

    在pages文件夹同级目录下,新建一个文件夹,文件夹名称为 “custom-tab-bar” ,就跟自定义组件一样创建,然后自己写基本样式
    在这里插入图片描述

    五、引入ColorUI样式至custom-tab-bar组件

    1. 因为组件内需要使用ColorUI的样式,但是在app.wxss中引入是作用不到custom-tab-bar组件的,所以需要在custom-tab-bar组件中index.wxss引入ColorUI样式文件。
    2. 虽然引入ColorUI的样式,但是由于微信小程序的自定义组件只支持class选择器,所以底部tabBar样式无法完整的显示出来,样式上会有差别,需要自行调整样式。
      	@import "/colorui/main.wxss";
      	@import "/colorui/icon.wxss";
      

    六、选取ColorUI底部导航栏并引入

    用微信小程序导入ColorUI的dome在操作条>底部操作条中选取相应的导航条,复制到custom-tab-bar组件的index.wxml

    <!--index.wxml代码-->
    <view class="cu-bar tabbar bg-white shadow">
    	<view class="action" wx:for="{{list}}" wx:key="index" data-isSpecial="{{item.isSpecial}}" data-path="{{item.pagePath}}" data-selected="{{selected}}" data-index="{{index}}" bindtap="switchTab">
    
    		<view wx:if="{{item.isSpecial}}" class="action text-gray add-action">
    			<button class='cu-btn cuIcon-add bg-green shadow'></button>
    			<view class='{{selected === index ? "text-green" : "text-gray"}}'>
    				{{item.text}}
    			</view>
    		</view>
    
    		<block wx:else>
    			<view class='cuIcon-cu-image'>
    				<image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
    			</view>
    			<view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
    		</block>
    
    	</view>
    </view>
    
    // index.js代码
    Component({
      options: {
        addGlobalClass: true,
      },
      lifetimes: {
    
      },
    
      pageLifetimes: {
    
      },
    
      data: {
        selected: null, //设置底部切换高亮,并进行页面切换
        modalStatus: false,
        authorizeModal: false,
        "list": [{
            pagePath: "/pages/shouye/shouye",
            iconPath: "/img/tabbar/home.png",
            selectedIconPath: "/img/tabbar/home_cur.png",
            text: "首页"
          },
          {
            text: "发布",
            isSpecial: true
          },
          {
            pagePath: "/pages/mine/mine",
            iconPath: "/img/tabbar/my.png",
            selectedIconPath: "/img/tabbar/my_cur.png",
            text: "我的"
          }
        ]
      },
    
      methods: {
        switchTab(e) {
          console.log( e.currentTarget.dataset)
          const url = e.currentTarget.dataset.path
          this.setData({
            selected: e.currentTarget.dataset.index
          })
      }
    })
    

    到这里,自定义导航基本能在页面展示出来了,需要注意的是,每个tab页面,都要开启“usingComponents ”项,或者直接在app.json中全局设置。

    虽然能展示出来了,但你试着切换导航,会发现一个问题,样式总是对应不上,比如 0 1 2 有这三个导航,你点了1之后,选中的样式是2,点2后,选中的样式是1,解决方法是:在每一个tab页面,在周期函数onShow里添加如下代码:

      // shouye.js部分代码 
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    	if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          console.log('设置选中项 0')
          this.getTabBar().setData({
            selected: 0
          })
        }
      },
      
      // fabu.js部分代码
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        if (typeof this.getTabBar === 'function' &&
         this.getTabBar()) {
         console.log('设置选中项 1')
         this.getTabBar().setData({
          selected: 1
         })
       }
      },
    
      // mine.js部分代码
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          console.log('设置选中项 2')
          this.getTabBar().setData({
            selected: 2
          })
        }
      },
    

    注意每个tab页面的selected值不同,对应“custom-tab-bar”中data的list数组中的下标,this.getTabBar()其实返回的就是自定义的那个导航组件“custom-tab-bar” (可自行打印查看),然后执行setData去修改selected的值,从而让样式正常显示。。

    以上就是本文的全部内容,希望对大家的学习有所帮助

    展开全文
  • 使用ColorUI组件

    千次阅读 2021-10-12 12:03:55
    项目初始化请参照:使用ColorUI构建小程序项目_LookOutThe的博客-CSDN博客 目录 一、开发准备工作 1.在前端开发工具中打开下载好的demo目录 2.浏览器打开demo 3.微信开发工具打开上一篇构建好的项目 二、开始...
  • uniapp之colorUI

    2021-06-29 15:11:04
    @import "colorui/main.css"; @import "colorui/icon.css"; 3.在main.js引入cu-custom组件 import cuCustom from 'colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom) 4.在index页面...
  • 基于微信小程序 + colorUI 做的form表单封装 一、input篇 文章目录 系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示:这里可以添加本文要记录的大概内容...
  • 之前记录了weUI组件库的基础使用,现在用一下更加【漂酿】的colorUI,weUI组件库的博客在这里:微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884 ...
  • colorui 使用iconfont图标

    千次阅读 2021-02-10 15:25:24
    ColorUI + Iconfont ColorUI下直接用iconfont,图标会显示乱码。各们同学可以试下以下方法。 1.首先在iconfont官网下载你的图标代码,然后解压压缩包(名字一般是download.zip),解压后可以看到文件夹里有多个文件...
  • Uniapp整合ColorUI进行项目开发 构建工具: VUE CLI 3.0 https://vue3js.cn/docs/zh/guide/migration/introduction.html uni-simple-router https://hhyang.cn/v2/ 1.使用Hbuilder新建uni-app 项目 [外链图片...
  •    写在前面:colorUI中提供了很多好看的底部操作条,如何使用这些底部操作条让我们的项目看起来更美观(ps:微信小程序的底部操作条tabBar总感觉少了点什么)。 一、null 二、null
  • 微信小程序+ColorUI

    2021-07-05 13:42:25
    2、语雀文档 ColorUI 群资源 3、Github ColorUI 鲜亮的高饱和色彩,专注视觉的小程序组件库 开发 1、下载官方案例demo,文件如下,colorui是独立的引入文件夹资源。 2、在app.json内 3、配置引入css样式的操作、...
  • uni-app中colorui的使用

    2021-04-17 23:57:24
    2、在colorui项目中,复制colorui文件夹下所有文件到你的项目根目录。 3、在app.vue中引入样式。 @import "colorui/main.css"; @import "colorui/icon.css"; 4、在pages.json全局引入color...
  • uniapp使用colorUI的tabbar被遮挡 原因是因为,必须在每一个子组件页面的底部加入以下内容: <view class="cu-tabbar-height"></view>
  • 在uniapp中使用colorui制作自定义tabbar1、直接在pages.json定义tabbar2、使用colorui制作自定义tabbar 1、直接在pages.json定义tabbar 我们通常在uniapp中的pages.json中直接配置tabbar。 如下面的例子: 这里...
  • 问题:使用colorui制作底部导航栏,引入导航栏后发现原来暂时指向主页用于检查页面效果的链接无法点击,导航栏点击也无效。 解决方式:导航栏与<navigator>组件不能同时指向同一个page(当导航栏中有指向某...
  • Github: https://github.com/weilanwl/ColorUI 下面讲解本人如何引用安装该组件库 第一步:官网下载文件 地址:https://www.color-ui.com/ 点击下载以后解压 选中demo/colorui 下面的main.wxss文件和icon.wxss文
  • 使用colorui制作小程序滚动广告栏 我们可以使用colorui组件开发小程序,能够很容易的写出广告栏。 <template> <view> <view class="cu-bar margin-top"> <view class="action"> <...
  • ColorUI提供的是自带的图标,但我需要的是自定义图片背景,于是我抄了ColorUI中的图标样式,然后做了以下设置: <button class="centered_button" :style="your image url"/> 样式代码 .centered-button{ ...
  • 页面 <view class="cu-progress round margin-top"> <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view> ...view class="text-center align-center progress-absolute">...
  • 使用ColorUI编写小程序

    2021-04-09 17:24:34
    去gitee或者github上搜索ColorUI下载源码 使用小程序打开其中的demo文件,它相当于一个模板 使用小程序打开其中的template文件,它相当于一个初始化好的小程序,你可以在里面写你自己的代码。 在微信中搜索ColorUI这...
  • ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,方便自己定制。 下面是ColorUI官方的小程序,可以在手机上先预览实际效果 官方网站:https://www.color-ui.com/ GitHub:...
  • 最近接到一个项目 开发一个小程序 主要是早教的培训机构使用 打算用uni-app来开发小程序 到时候打包成小程序就可以了 主要是用uni-app配合colorui使用 准备工作: 工具: 1、 uni-app的好伙伴 Hbuilder X 2、 微信...
  • 相比于同类小程序组件库,ColorUI更注重于视觉交互! 另外,设计非常具有现代感。组件颜色清新,动画活跃,更加注重于视觉交互。 下载地址:https://github.com/weilanwl/ColorUI 下载后找到/colorui文件夹, ...
  • 目标: 小程序原生开发 这个项目时间较长了,不做详细说明,简单展示一下。这里使用了colorUI 产出:
  • 下载源码解压获得/Colorui-UniApp文件夹,复制目录下的 /colorui 文件夹到你的项目根目录 App.vue 引入关键Css main.css icon.css <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import ...
  • 将压缩包中demo里的colorui文件夹拷到项目目录3.在app.wxss中引入文件4.根据DEMO使用二、踩坑1.动画的使用 前言 作为一个毫无审美的钢铁直男,一个漂亮的UI组件库拯救了我糟糕的前端页面。ColorUI是一个国内大佬写的...
  • nginx配置
  • 接着更新此系统教程,以期更深的理解前端开发及提升自已。本章我们来看看如何实现瀑布流布局,展示效果如下: 这里就不废话连篇进行分析了,以下为页面源码,其实资源图在本节下方,同学们自行下载使用。...
  • colorui的文件夹下有一个main.css,里面有checkbox .uni-checkbox-input::before,把这行注释掉就可以了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,550
精华内容 81,820
关键字:

colorui

友情链接: 001.zip