E企盈营销工具技术服务商 热线:4006-838-530

微信小程序使用ColorUI

E企盈直播平台营销卖货系统

一、说明与使用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。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序使用ColorUI
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏