精华内容
下载资源
问答
  • 使用uni-app和color-ui开发移动端遇到的一些问题
    2021-02-03 10:30:06
    首先在uni-app中引入color-ui
    在uni-app中引入color-ui其实很简单,使用Hbuilder-X可以直接创建一个uni-app的项目,然后在创建一个color-ui的项目,将color-ui项目中colorui文件直接拷贝到uni-app项目下,在App.vue中style下引入:
    @import "colorui/main.css";
    @import "colorui/icon.css";
    
    这样就可以直接在uni-app的项目中使用color-ui的样式。
    
    做项目的一些问题
    1. 做项目首先是要把整体的布局先设计出来,后面在加内容就非常方便;这里我们可以参考color-ui的布局,里面有flex的布局和grid的布局,基础的布局方式都有。
    
    2. 顶部导航栏可以使用color-ui提供的,也可以使用uni-app的;这两个区别在于color-ui的顶部导航样式会好看一点,但是每个页面又要加;使用uni-app的顶部导航就很方便,直接在 page.json 文件中的"globalStyle"中设置,可一参考uni-app官网的globalStyle属性介绍。
    
    3. 跨域的问题,如果不设置跨域,就只能在Hbuilder-x的内置浏览器中测试使用,开发时感觉很不方便。设置跨域,在 manifest.json 中给 “h5” 属性添加:
    "devServer" : {
    	"port" : 8080,
    	"disableHostCheck" : true,
    	"proxy" : {
    		"/api" : {
    			"target" : "http://192.168.12.23:8080/",
    			"changeOrigin" : true,
    			"secure" : false
    		}
    	}
    }
    port 后台接口的端口号,target 本机ip地址加端口,其它不需要改。
    
    4. 在 mian.js 中定义全局方法,如果方法中调用后台接口,成功后返回数据,调用方法时返回的数据为空,这是因为没有同步的原因;解决方法使用如下方式返回:
    var [error, res] = await uni.request({
    	url: this.ajaxUrl + '/api/shipmentApi/getDictionaryValue/dirtionaryValue.action?code=' + code + '&value=' + value,
    	dataType: 'json',
    	method: 'POST'
    })
    return res.data;
    然后在使用此方法的地方通过如下方式拿到返回的值:
    let transportMenth = this.getDictionaryValue("TransportMenth", res.data.shipmentMethod)	//运输方式
    transportMenth.then(res => {
    	this.transportValue = res.obj.value
    })
    看起来有一点麻烦,但是可以拿到返回值,目前没有找到更好的方法。
    
    5. 引入外部图标,通常会使用阿里巴巴矢量图标库来查找图标,找到图标后下载代码,将下载的代码解压后,将文件夹下的 iconfont.tff 文件拷贝到uni-app项目的static文件夹下,然后在 App.vue 中引入:
     /*导入图标*/
    @font-face {
        font-family: 'iconfont';
        src: url('~@/static/iconfont.ttf') format('truetype');		//发货地址图标
    }
     /*设置样式*/
    .iconfont {
    	  font-family: "iconfont" !important;
    	  font-size: 16px;
    	  font-style: normal;
    	  -webkit-font-smoothing: antialiased;
    	  -moz-osx-font-smoothing: grayscale;
    	}
     /*使用*/	
     <view>
    	<text class="iconfont text-red">&#xe602;</text>
     </view>
    &#xe602; 是图标的编码,打开下载图标代码的 demo_index.html 文件,可以看到图标的编码。
    
    6. 图片上传可以使用 uni-app 自带的图片上传方法,预览的获取路径时设置响应属性为:
     responseType: "arraybuffer",
     将的得到的 arraybuffer 转为blob后使用 FileReader 读取 blob 生成一个 url 的地址。
    
    7. uni-app 中使用分页查询可以参考 uni-app 官网的触底事件。 
    
    8. uni-app 中引入插件,比如可以使用Hbilder-x导入插件,或者自己下载复制到自己的项目中引用。
    
    更多相关内容
  • 已经封装好request请求,api模块化管理,页面水印,cds请求等各种常用的js
  • One-color-UI-LOGIN-

    2021-05-13 09:26:04
    一种颜色的用户界面登录 这是一个仅包含HTML和CSS的登录页面,这是一个UI-登录页面,该文件可供下载 CURPRA代码
  • UI框架 color-admin-v2.1

    2018-03-16 10:09:33
    很全面的UI框架,多种颜色,包括前后台,bootstrap,集成多种常用jquery插件,jqgrid datatable select2 ichecker 等
  • npm install --save material-ui-color-picker 用法 import React from 'react' import ColorPicker from 'material-ui-color-picker' < ColorPicker name = 'color' defaultValue = '#000' value={this.state.color...
  • 一、版本:"element-ui": "2.4.11" 1.原本的样式 2.需要實現類似編輯工具欄的樣式 3. 修改方法为覆盖element-ui的原本样式,代码如下 <template> <div class="dashboard-container"> &...
    一、版本:"element-ui": "2.4.11"
    

       1.原本的样式

        

    2.需要實現類似編輯工具欄的樣式

        

    3. 修改方法为覆盖element-ui的原本样式,代码如下

    <template>
      <div class="dashboard-container">
    
        <div class="color-picker font-color-picker" >
          <el-color-picker v-model="color" ></el-color-picker>
        </div>
        <div class="color-picker back-color-picker">
          <el-color-picker v-model="color"></el-color-picker>
        </div>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    
    export default {
      name: 'Dashboard',
      components: { },
      data() {
        return {
          color:'#181515'
        }
      },
    
      computed: {
        ...mapGetters([
        ])
      },
      created() {
    
      }
    }
    </script>
    <style lang="scss">
      .color-picker{
          .el-color-picker__icon {
            display: none !important;
          }
    
          .el-icon-arrow-down {
            display: none !important;
          }
          .el-color-picker__color-inner {
            position: relative !important;
            height: 20% !important;
            bottom: 0px;
            display: block !important;
          }
      }
      .font-color-picker{
        .el-color-picker__color::before {
          content: 'A';
          color: #181515;
          font-size: 17px;
        }
      }
      .back-color-picker{
        .el-color-picker__color::before {
          display: block;
          height: 80%;
          content: '';
          background-image: url('../../assets/beijingyanse.svg');
          background-size: 100% 100%;
        }
      }
    </style>
    

     

    展开全文
  • 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迎来了2.0的升级,相比之前的版本,2.0版本重构了基础代码,增加了更多的配色,这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于...
  • 之前记录了weUI组件库的基础使用,现在用一下更加【漂酿】的colorUI,weUI组件库的博客在这里:微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884 ...

    目录

    使用方法

    1.下载的colorUI源码后,里面有这些文件夹

    2.运行demo文件夹,查看各组件效果

    3.template文件夹(colorUI空项目文件介绍)

     注意:colorUI的app.json文件和原生的微信小程序的app.json有所不同了​

     自定义顶部导航栏

    自定义tabBar

    原生tabBar与自定义tabBar效果演示


    之前记录了weUI组件库的基础使用,现在用一下更加【漂酿】的colorUI,weUI组件库的博客在这里:微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884

    相较于weUI和原生微信小程序 样式的统一,colorUI更注重于【个性】,它的样式很动感,blingbling的,比较适合做一些活泼的活动小程序.而且,colorUI能兼容uniapp、微信小程序,还能用uniapp发布h5版本,兼容效果非常好。


            相较于weUI的使用上,colorUI会更复杂些,准确的说,是更繁琐一些,毕竟是大佬一个人肝出来的,而且对组件的样式、封装做了很强的兼容性处理,所以使用上没有weUI那种有团队做的简易,而且目前colorUI的文档,没有完成,只针对部分内容做了介绍,所以需要大家下载源码自行摸索(其实封装的挺易懂的~)

            就算你觉得麻烦不想用,也完全可以留下colorUI的wxss样式文件,肯定在其他项目中能用到,cv大法好呀~

            那么前言就介绍到这里,接下来会对colorUI的使用进行介绍。


    colorUI在线效果演示:(用uniapp发布的h5)

    ColorUI组件库 (color-ui.com)https://demo.color-ui.com/colorUI仓库镜像地址:

    mirrors / weilanwl / colorui · CODE CHINA (csdn.net)https://codechina.csdn.net/mirrors/weilanwl/colorui?utm_source=csdn_github_acceleratorcolorUI资源网站:

    ColorUI群资源 · 语雀 (yuque.com)https://www.yuque.com/colorui 一些针对colorUI组件介绍的博客:(比官方文档详细w(゚Д゚)w)

    小程序与colorUI实战总结_steve1988717的博客-CSDN博客使用colorUI,首先在app.wxss引入这两个文件@import "colorui/main.wxss";@import "colorui/icon.wxss";想实现下面的tabbar的效果,可以按着下面的步骤来写<view class="cu-bar tabbar bg-white"> <view data-num="1" class="acti...https://blog.csdn.net/steve1988717/article/details/96099036小程序ColorUI使用简易教程_仗剑东游的猫-CSDN博客_colorui本教程配合官方示例食用更佳!!!目录前言快速上手使用UniApp开发开始使用自定义导航栏使用原生小程序开发从现有项目开始从新项目开始使用自定义导航栏组件基础元素layout布局Background背景Text文字Icon图标Button按钮Tag标签Avatar头像Progress进度条Border&S...https://blog.csdn.net/miao_yf/article/details/102971767

    使用方法

    1.下载的colorUI源码后,里面有这些文件夹

    2.运行demo文件夹,查看各组件效果

    你可以参考效果,找到对应的代码,复制到自己的项目里去使用

    当然,开着这个项目找不太方便,现在就要用到上面的地址链接了ColorUI组件库效果演示H5,这样方便开发。

    3.template文件夹(colorUI空项目文件介绍)

    template文件夹里就是最基础的微信小程序内容,只不过放好了colorUI组件库的文件

    【cu-custom】组件中,还有 colorUI的navigation(顶上的导航栏),详细介绍看下方【自定义顶部导航栏】


    而且,在app.wxss(全局样式)文件中也引入好了colorUI的样式文件

     注意:colorUI的app.json文件和原生的微信小程序的app.json有所不同了

     colorUI空文件中的app.json文件,【使用顶部导航栏cu-custom组件】,替换默认的顶部导航栏效果,同时,里面舍弃了tabBar配置,博客后面会介绍tabBar在index文件中的配置,详情请看【自定义tabBar】。


    •  自定义顶部导航栏

    colorUI空文件中,app.json文件中,有一行"navigationStyle": "custom" 是原生小程序没有写的

    这段代码是用来   关闭【默认导航栏样式】和 引入colorUI自定义顶部导航栏 

    页面中使用方法: 

    <!-- 顶部导航栏 组件 -->
    <cu-custom bgColor="bg-gradual-blue">
      <view slot="content">ColorUI 空白模板</view>
    </cu-custom>

     效果如下:

    你也可以做的更好看一些:

    <!-- bgImage==> 顶部导航栏的背景图片
    isBack="{{true}} ==》 开启返回箭头
    -->
    <cu-custom bgImage="../../../images/wave.gif" isBack="{{true}}">
      <!-- slot="backText" ==》 跟在返回箭头之后 -->
      <view slot="backText">返回</view>
      <!--  slot="content"===》居中的标题文字  -->
      <view slot="content">微动画</view>
    </cu-custom>

    这样的 navigation(顶上的导航栏)更加美观个性化:

    而且:如果不在wxml中使用

    • 自定义tabBar

    使用自定义tabBar组件,需要对菜单页面进行一定的改造,接下来说明一下其和原生微信小程序在构造上的区别与注意点

    原生小程序项目标准格式: 

    原生小程序的tabBar菜单对应的页面都在pages文件夹下,按照Page格式设置js内容;使用的组件效果则是放在对应的compoents文件夹下,每个tabBar菜单对应是一个Page页面

    colorUI使用自定以tabBar的方法

    在colorUI中,因为使用的是自定义的tabBar,是通过组件的形式引入到页面中,然后通过样式将这个组件固定定位 position: fixed到页面的下放bottom位置。达到跟原生tabBar类似的效果。

    这里就先说一下原理,详细的代码我后单独弄一篇博客,不然这里太长了~

    微信小程序-colorUI组件库-自定义tabBar_五速无头怪的博客-CSDN博客icon-default.png?t=L9C2https://blog.csdn.net/black_cat7/article/details/120740381

    原生tabBar与自定义tabBar效果演示

    •  默认的微信小程序tabbar效果:

    •  colorUI封装的tabbar效果:

    看上面截图对照,你可能绝对好像自定义tabBar和原生的tabBar也没啥太大区别,尤其是第一种自定义tabBar,跟原生的看起来不能说毫不相关,只能说是一模一样。

     但是,原生的tabBar,限制死了就那几样配置参数

    路径pagePath、菜单名文字text、未选中图标、选中图标iconPath、selectedIconPath,还有一些操作栏颜色、定位的参数,没有其他多余的配置项目了(不过也满足基础使用了)

    但是如果想要实现在tabBar上的一些样式、显示效果的改动,害得是自定义tabBar

    像这个按钮、红色角标都得靠封装的自定义tabBar组件来实现,原生的tabBar没法做到,各有所长吧。

     关于微信小程序自定义tabBar,可以在官方文档了解一下大概内容:

    自定义 tabBar | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html


    以上,就是colorUI组件库的基础介绍和如何使用的介绍,更加详细的组件使用、属性说明都在上方的链接中,有不少博客参考。

    展开全文
  • twc颜色选择器 Toast-ui Web组件颜色选择器 如何使用 yarn install yarn start 要么 npm install npm run start
  • 基于uni-app,使用vant 和 colorui 完成的简易点餐小程序,仅做了首页和下单选购页面 数据为模拟数据,可正常使用,更换成接口即可进行下一步例如结算页面等的制作 资源链接: ... ...
  • Element-UI 使用手册文档 V2.4.6 (Vue版本) 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 ...
  • 相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制。 官网 相对于其他框架,有文档,该组件库没有文档说明,...
  • 微信小程序引入colorui组件库,自定义导航栏和tabbar,仅用于个人记录学习之用
  • 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...
  • ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,方便自己定制。 下面是ColorUI官方的小程序,可以在手机上先预览实际效果 官方网站:https://www.color-ui.com/ GitHub:...
  • element-ui 组件库之所以受欢迎,除了组件丰富,文档友好之外,还得益于它的精美的设计。之前在组件库的整体设计文章中提到,element-ui 背后有一只强大的设计团队,他们为组件库了制定了一套设计规范。 需求分析 当...
  • element-ui 整体替换主题色

    千次阅读 2019-01-15 18:59:08
    $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary...
  • material-uiMaterial-UI is a React component library made to follow Google’s Material Design guidelines. As such, it offers a clean UI experience that is both accessible and cross-browser compatible. ...
  • Element-UI实现自定义主题

    千次阅读 2019-08-21 09:45:55
    目录 方法一:使用命令行主题工具 安装工具 初始化变量文件 修改变量 编译主题 引入自定义主题 方法二: 直接修改element样式变量 ...安装element-ui 安装sass-loader,node-sass 改变element样...
  • 使用的是colorui的小程序UI框架。 colorui地址:https://www.color-ui.com/ wxml代码 &lt;view class="canui-load" wx:if="{{loadModal}}"&gt; &lt;view class='cu-load load-...
  • 问题:使用colorui制作底部导航栏,引入导航栏后发现原来暂时指向主页用于检查页面效果的链接无法点击,导航栏点击也无效。 解决方式:导航栏与<navigator>组件不能同时指向同一个page(当导航栏中有指向某...
  • uniapp中使用colorUI说明文档

    万次阅读 2020-03-30 09:32:35
    colorUI简介 ColorUI迎来了2.0的升级,相比之前的版本,2.0版本重构了基础代码,增加了更多的配色,这是一个全新的小程序UI解决方案。 ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,...
  • 使用的是colorui的小程序UI框架。 colorui地址:https://www.color-ui.com/ index.wxml <!--商品轮播图--> <swiper class="screen-swiper square-dot bg-white" indicator-dots="true" circular="true...
  • 国外最新color-admin 模板框架,里面包含多个版本 有纯html版本,有angularjs,ajax版本。多版本选择。
  • Chakra-UI 学习笔记

    千次阅读 2021-01-06 08:45:36
    Chakra-UI 学习笔记 文章出处: 拉 勾 大前端 高薪训练营 现代化 React UI 框架 Chakra-UI 1. Chakra-UI 介绍 Chakra UI是一个简单的,模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件. 文档: ...
  • color ui的使用

    千次阅读 2020-08-08 10:55:35
    目录一、什么是ColorUI二、如何使用:第一步 下载代码包,获取素材第二步 使用demo文件,正式使用第三步 正式使用(再次强调,我是基于上面提到的第二种方式引入colorui组件的) 官网网站:...
  • uni-app:uni-ui的使用

    2022-01-20 16:29:51
    uni-ui 演示 uni-ui 文档 搭建 创建项目的时候选择uni-ui组件,在项目中就可以直接使用了 案例 <view class="gridView">...view class="grid-item-box" style="background-color: #fff;"> <uni-ico
  • doopage-react-ui-kit

    2021-04-16 12:24:44
    @ doopage / react-ui-kit DooPage项目的基本组件基于 安装 与npm npm install --save @doopage/react-ui-kit 或配纱 yarn add @doopage/react-ui-kit 安装依赖 npm install @material-ui/core @material-ui/lab ...
  • edex-ui 每年年初似乎都在疯狂地寻求提高生产率的方法。 新年的决议,渴望重新开始新一年的渴望,当然,“与旧同在,与新同在”的态度都有助于这一点。 通常的推荐建议严重偏向于封闭源代码和专有软件。 不一定要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 210,987
精华内容 84,394
关键字:

color-ui