微信小程序-使用ColorUI

一、说明与使用

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

目录结构如下：

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

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

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

二、常见场景使用

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

比如常见的搜索框：

<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px"><view class="search-form round"><text class="icon-search"></text><input type="text" placeholder="搜索" confirm-type="search" bindinput="searchIcon"></input></view>
</view>

比如消息或者富矿状态下的数字标签类别：

<view class="padding flex justify-between align-center"><view class="cu-avatar xl radius">港<view class="cu-tag badge">99+</view></view><view class="cu-avatar xl radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"><view class="cu-tag badge">9</view></view><view class="cu-avatar xl radius"><view class="cu-tag badge"></view><text class="icon-people"></text></view><view class="cu-avatar xl radius"><view class="cu-tag badge">99+</view></view>
</view>

比如特殊样式的底部导航栏：

<view class="cu-bar tabbar margin-bottom-xl bg-white"><view class="action text-green"><view class="icon-homefill"></view> 首页</view><view class="action text-gray"><view class="icon-similar"></view> 分类</view><view class="action text-gray add-action"><button class="cu-btn icon-add bg-green shadow"></button>发布</view><view class="action text-gray"><view class="icon-cart"><view class="cu-tag badge">99</view></view>购物车</view><view class="action text-gray"><view class="icon-my"><view class="cu-tag badge"></view></view>我的</view>
</view>

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

微信小程序-使用ColorUI相关推荐

微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
微信小程序遇到的问题
一开始看了个文章跟着做导航栏微信小程序自定义tabbar,微信小程序加colorui设置底部tarbar_颖浩的博客-CSDN博客_colorui 固定底部后来遇到了问题 Couldn't res ...
小程序接入h5页面_微信小程序开发接入colorUI
本文接前天的小程序开发第一篇文章,上篇文章完成了微信官方提供的小程序初始模板代码的构建,今天这篇文章主要讲解小程序使用colorUI框架,并构建一个简单的页面. 前注: 1.本文代码基于第一篇文章的基 ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
微信小程序通用开发框架小程序端包含若干基础组件
小程序快速开发组件,内含 lskzj中的加载框ldbox,弹出框msgbox,消息框ttbox.请求函数lsk.js,以及colorui样式库.此包是基于微信小程序开发,因为其它的比如百度.支付宝.今 ...
api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集第一款官方WeUI组件库 " 地址: ht ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序开屏广告实现
微信小程序开屏广告即打开微信小程序后全屏展示的广告图片.用户可点击"跳过"按钮跳过广告,或者广告展示一段时间过后进入微信小程序.并可以显示广告的剩余时间.效果图如下(背景图是网图, ...
微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
微信小程序入门开发教程
欢迎关注我的微信公众号"人小路远"哦,在这里我将会记录自己日常学习的点滴收获与大家分享,以后也可能会定期记录一下自己在外读博的所见所闻,希望大家喜欢,感谢支持! 逐步更新中,根据微 ...

微信小程序-使用ColorUI

一、说明与使用

二、常见场景使用

微信小程序-使用ColorUI相关推荐

最新文章

热门文章