微信小程序自定义状态栏组件,提取自(colorui)

最新推荐文章于 2024-12-19 10:47:49 发布
原创 最新推荐文章于 2024-12-19 10:47:49 发布 · 1.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#微信小程序 #javascript 
<view class="cu-custom" style="height:{{CustomBar}}px">
  <view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
    <view class="action" bindtap="BackPage" wx:if="{{isBack}}">
      <view class="icon iconfont icon-fenxiang"></view>
      <slot name="backText"></slot>
    </view>
    <view class="action border-custom"  wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
      <view class="icon iconfont icon-fenxiang" bindtap="BackPage"></view>
      <view class="icon iconfont icon-home" bindtap="toHome"></view>
    </view>
    <view class="content" style="top:{{StatusBar}}px">
      <slot name="content"></slot>
    </view>
    <slot name="right"></slot>
  </view>
</view>

 

const app = getApp();
Component({
   /**
    * 组件的一些选项
    */
   options: {
      addGlobalClass: true,
      multipleSlots: true
   },
   /**
    * 组件的对外属性
    */
   properties: {
      bgColor: {
         type: String,
         default: '#ff0000'
      },
      isCustom: {
         type: [Boolean, String],
         default: false
      },
      isBack: {
         type: [Boolean, String],
         default: false
      },
      bgImage: {
         type: String,
         default: ''
      },
   },
   /**
    * 组件的初始数据
    */
   data: {
      StatusBar: '',
      CustomBar: '',
      Custom: ''
   },
   /**
    * 组件的方法列表
    */
   methods: {
      BackPage() {
         console.log(1);
         wx.navigateBack();
      },
      toHome() {
         console.log(2);
         wx.reLaunch({
            url: '/pages/index/index',
         })
      }
   },
   attached() {
      wx.getSystemInfo({
         success: e => {
            let custom = wx.getMenuButtonBoundingClientRect();
            this.setData({
               StatusBar: e.statusBarHeight,
               CustomBar: custom.bottom + custom.top - e.statusBarHeight,
               Custom: custom
            })
         }
      })
   }
})
{
   "component": true,
   "usingComponents": {}
}
/* components/custom/index.wxss */
@font-face {
   font-family: 'iconfont';
   src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

.iconfont {
   font-family: "iconfont" !important;
   font-size: 38rpx;
   font-style: normal;
   color: #FFFFFF;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 .icon-fenxiang:before {
   content: "\f016f";
 }
 
 .icon-home:before {
   content: "\e821";
 }

.cu-custom {
	display: block;
   position: fixed;
   top: 0;
   z-index: 9999;
   pointer-events: none;
}

.cu-custom .cu-bar .content {
	width: calc(100% - 440rpx);
}


.cu-custom .cu-bar .content image {
	height: 60rpx;
	width: 240rpx;
}

.cu-custom .cu-bar {
	min-height: 0px;
	padding-right: 220rpx;
	box-shadow: 0rpx 0rpx 0rpx;
   z-index: 9999;
}

.cu-custom .cu-bar .border-custom {
	position: relative;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	height: 30px;
}

.cu-custom .cu-bar .border-custom::after {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	transform: scale(0.5);
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	border: 1rpx solid #FFFFFF;
	opacity: 0.5;
}

.cu-custom .cu-bar .border-custom::before {
	content: " ";
	width: 1rpx;
	height: 110%;
	position: absolute;
	top: 22.5%;
	left: 0;
	right: 0;
	margin: auto;
	transform: scale(0.5);
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	opacity: 0.6;
	background-color: #FFFFFF;
}

.cu-custom .cu-bar .border-custom text {
	display: block;
	flex: 1;
	margin: auto !important;
	text-align: center;
	font-size: 34rpx;
}



.cu-bar {
	display: flex;
	position: relative;
	align-items: center;
	min-height: 100rpx;
	justify-content: space-between;
}

.cu-bar .action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: space-evenly;
   max-width: 100%;
   pointer-events: auto;
}

.cu-bar .action.border-title {
	position: relative;
	top: -10rpx;
}

.cu-bar .action.border-title text[class*="bg-"]:last-child {
	position: absolute;
	bottom: -0.5rem;
	min-width: 2rem;
	height: 6rpx;
	left: 0;
}

.cu-bar .action.sub-title {
	position: relative;
	top: -0.2rem;
}

.cu-bar .action.sub-title text {
	position: relative;
	z-index: 1;
}

.cu-bar .action.sub-title text[class*="bg-"]:last-child {
	position: absolute;
	display: inline-block;
	bottom: -0.2rem;
	border-radius: 6rpx;
	width: 100%;
	height: 0.6rem;
	left: 0.6rem;
	opacity: 0.3;
	z-index: 0;
}

.cu-bar .action.sub-title text[class*="text-"]:last-child {
	position: absolute;
	display: inline-block;
	bottom: -0.7rem;
	left: 0.5rem;
	opacity: 0.2;
	z-index: 0;
	text-align: right;
	font-weight: 900;
	font-size: 36rpx;
}

.cu-bar.justify-center .action.border-title text:last-child,
.cu-bar.justify-center .action.sub-title text:last-child {
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}

.cu-bar .action:first-child {
	margin-left: 30rpx;
	font-size: 30rpx;
}

.cu-bar .action text.text-cut {
	text-align: left;
	width: 100%;
}

.cu-bar .cu-avatar:first-child {
	margin-left: 20rpx;
}

.cu-bar .action:first-child>text[class*="cuIcon-"] {
	margin-left: -0.3em;
	margin-right: 0.3em;
}

.cu-bar .action:last-child {
	margin-right: 30rpx;
}

.cu-bar .action>text[class*="cuIcon-"],
.cu-bar .action>view[class*="cuIcon-"] {
	font-size: 36rpx;
}

.cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
	margin-left: 0.5em;
}

.cu-bar .content {
	position: absolute;
	text-align: center;
	width: calc(100% - 340rpx);
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	height: 60rpx;
	font-size: 32rpx;
	line-height: 60rpx;
	cursor: none;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.cu-bar.ios .content {
	bottom: 7px;
	height: 30px;
	font-size: 32rpx;
	line-height: 30px;
}

.cu-bar.btn-group {
	justify-content: space-around;
}

.cu-bar.btn-group button {
	padding: 20rpx 32rpx;
}

.cu-bar.btn-group button {
	flex: 1;
	margin: 0 20rpx;
	max-width: 50%;
}

.cu-bar .search-form {
	background-color: #f5f5f5;
	line-height: 64rpx;
	height: 64rpx;
	font-size: 24rpx;
	color: var(--black);
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0 30rpx;
}

.cu-bar .search-form+.action {
	margin-right: 30rpx;
}

.cu-bar .search-form input {
	flex: 1;
	padding-right: 30rpx;
	height: 64rpx;
	line-height: 64rpx;
	font-size: 26rpx;
	background-color: transparent;
}

.cu-bar .search-form [class*="cuIcon-"] {
	margin: 0 0.5em 0 0.8em;
}

.cu-bar .search-form [class*="cuIcon-"]::before {
	top: 0rpx;
}

.cu-bar.fixed,
.nav.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1024;
	/* box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); */
}

.cu-bar.foot {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 1024;
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}

.cu-bar.tabbar {
	padding: 0;
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.cu-tabbar-height {
	min-height: 100rpx;
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
}

.cu-bar.tabbar.shadow {
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}

.cu-bar.tabbar .action {
	font-size: 22rpx;
	position: relative;
	flex: 1;
	text-align: center;
	padding: 0;
	display: block;
	height: auto;
	line-height: 1;
	margin: 0;
	overflow: initial;
}

.cu-bar.tabbar.shop .action {
	width: 140rpx;
	flex: initial;
}

.cu-bar.tabbar .action.add-action {
	position: relative;
	z-index: 2;
	padding-top: 50rpx;
	background-color: inherit;
}

.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
	position: absolute;
	width: 70rpx;
	z-index: 2;
	height: 70rpx;
	border-radius: 50%;
	line-height: 70rpx;
	font-size: 50rpx;
	top: -35rpx;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
}

.cu-bar.tabbar .action.add-action::after {
	content: "";
	position: absolute;
	width: 100rpx;
	height: 100rpx;
	top: -50rpx;
	left: 0;
	right: 0;
	margin: auto;
	box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
	border-radius: 50rpx;
	background-color: inherit;
	z-index: 0;
}

.cu-bar.tabbar .action.add-action::before {
	content: "";
	position: absolute;
	width: 100rpx;
	height: 30rpx;
	bottom: 30rpx;
	left: 0;
	right: 0;
	margin: auto;
	background-color: inherit;
	z-index: 1;
}

.cu-bar.tabbar .btn-group {
	flex: 1;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 10rpx;
}

.cu-bar.tabbar button.action::after {
	border: 0;
}

.cu-bar.tabbar .action [class*="cuIcon-"] {
	width: 100rpx;
	position: relative;
	display: block;
	height: auto;
	margin: 0 auto 10rpx;
	text-align: center;
	font-size: 40rpx;
}

.cu-bar.tabbar .action .cuIcon-cu-image {
	margin: 0 auto;
}

.cu-bar.tabbar .action .cuIcon-cu-image image {
	width: 50rpx;
	height: 50rpx;
	display: inline-block;
}

.cu-bar.tabbar .submit {
	align-items: center;
	display: flex;
	justify-content: center;
	text-align: center;
	position: relative;
	flex: 2;
	align-self: stretch;
}

.cu-bar.tabbar .submit:last-child {
	flex: 2.6;
}

.cu-bar.tabbar .submit+.submit {
	flex: 2;
}

.cu-bar.tabbar.border .action::before {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0.5);
	transform-origin: 0 0;
	border-right: 1rpx solid rgba(0, 0, 0, 0.1);
	z-index: 3;
}

.cu-bar.tabbar.border .action:last-child:before {
	display: none;
}

.cu-bar.input {
	padding-right: 20rpx;
	background-color: #FFFFFF;
}

.cu-bar.input input {
	overflow: initial;
	line-height: 64rpx;
	height: 64rpx;
	min-height: 64rpx;
	flex: 1;
	font-size: 30rpx;
	margin: 0 20rpx;
}

.cu-bar.input .action {
	margin-left: 20rpx;
}

.cu-bar.input .action [class*="cuIcon-"] {
	font-size: 48rpx;
}

.cu-bar.input input+.action {
	margin-right: 20rpx;
	margin-left: 0rpx;
}

.cu-bar.input .action:first-child [class*="cuIcon-"] {
	margin-left: 0rpx;
}

.svg_icon {
   display: inline-flex;
   width: 60rpx;
   height: 60rpx;
   overflow: hidden;
  }
   
  .svg_icon-inner {
   width: 100%;
   height: 100%;
   transform: translateY(-100%);
   filter: drop-shadow(0 100% 0 #ffffff);
  }

使用

 

ColorUI-小程序原生高颜值组件库--ColorUI组件库.zip
09-23
简介hi!开发者！ColorUI迎来了2.0的升级，相比之前的版本，2.0版本重构了基础代码，增加了更多的配色，这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！项目为个人开源项目，如果项目有帮到你，希望能支持下开发者。使用下载源码包可得到 Demo 和 Template 两个项目， Demo 包含所有组件源码。 Template 是一个已经引用了ColorUI的空白模板。Demo 即文档。在线文档 编写中...交流微信群：加入微信群请先添加开发者微信，备注GitHub。QQ群：240787041 或扫描二维码。
在程序中动态改变控件的背景颜色
chaoyong110的专栏
08-01 1582
<br />在 view 类中添加消息 WM_CTLCOLOR 的响应函数，以文本控件为例，如下：<br /> <br />HBRUSH CCATestPro2View::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) <br />{<br /> HBRUSH hbr = CFormView::OnCtlColor(pDC, pWnd, nCtlColor);<br /> <br />//以下代码自己添加<br /> if ((IDC_EDIT_DECODE
微信小程序自定义头部导航栏 胶囊按钮(组件化)
qq_42911663的博客
04-20 5164
效果图 支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义 首先在app.json window配置项添加 "window": { "navigationStyle": "custom" } 自定义头部导航栏代码 wxml部分 <view class="cu-custom" style="height:{{CustomBar}}px"> ...
uniapp vue3版本 引用color-ui的cu-custom组件问题
Pikachu_magical的博客
06-14 6661
cu-custom组件使用出现问题，不兼容 仅测试Android环境
微信小程序-colorUI组件库
热门推荐
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-12 1万+
之前记录了weUI组件库的基础使用，现在用一下更加【漂酿】的colorUI，weUI组件库的博客在这里：微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884 相较于weUI和原生微信小程序样式的统一，colorUI更注重于【个性】，它的样式很动感，blingbling的，比较适合做一些活泼的活动小程序 ...
微信小程序开发20__第三方UI组件 ColorUI 的应用
daozhongyang的专栏
06-15 2158
ColorUI 有鲜艳的高饱和色彩， 是专注视觉的微信小程序组件库。
ColorUI CSS 项目常见问题解决方案
最新发布
gitblog_00071的博客
12-19 637
ColorUI CSS 项目常见问题解决方案 ColorUI CSS 是一个基于 CSS 的小程序组件库，提供了鲜亮的高饱和色彩和视觉友好的UI组件。该项目主要使用 HTML、CSS 和 JavaScript 编程语言。 新手常见问题及解决步骤 问题一：如何将 ColorUI CSS 集成到我的项目中？ 解决步骤： 下载 ColorUI CSS 源码，解压后得到 colorui 文件夹。 将 c...
微信小程序镜像胶囊组件（colorui）
weixin_43543882的博客
07-04 2307
示例： capsule.wxml <view class="capsule-box" style="top:{{capsuleTop}}px;height:{{capsuleHeight}}px;"> <navigator class='cuIcon-back' open-type="navigateBack"></navigator> <navigator wx:if="{{iconSelect == 'home'}}" class='cuIco
微信小程序 colorui 仿美团优选商家模板界面（无功能）
iZaiZaiA的博客
03-08 9195
使用的是colorui的小程序UI框架。 colorui地址：https://www.color-ui.com/ index.wxml &lt;!--状态栏区域--&gt; &lt;view class="cu-custom" style="height:{{CustomBar}}px;"&gt; &lt;view class="cu-bar fixed none-bg ...
uniapp h5在钉钉移动端 钉钉自带导航条与color-ui的cu-custom导致双重导航问题
Pikachu_magical的博客
07-22 2463
uniappvue3版本背景原本为app，后期要求h5版本，主要针对与手机钉钉环境使用下图为企业微信双重导航条效果（钉钉有同样问题，忘了截图，目前只针对钉钉做了处理，思路一致）最初思路想到了判断运行环境，使用条件编译实际修改中发现无法判断钉钉微H5应用环境，只能判断出Android与ios，app与h5区别总之条件编译处理不太理想app与h5条件处理会导致不自带顶部导航的浏览器效果较差。.........
uniapp自定义导航栏，高度，自定义组件
没时间
12-25 2629
设置自定义导航栏 ：globalStyle 内 navigationStyle": "custom" 配置页面：pages.json "globalStyle": { "mp-alipay": { /* 支付宝小程序特有相关 */ "transparentTitle": "always", "allowsBounceVertical": "NO" }, "navigationBarBackgroundColor": "#0081ff", "navigationBarTitl
uni-app相关的框架资料
浩星
01-27 2504
前言： 对uin-app的资料进行整理，这里说说他支持的框架资料。 官方入口：入口 相关资料： 一、ColorUI-高颜值，高效率的小程序组件库 git源码：点我 相关项目入口 - 一个基于colorui的商城项目：点我 实现步骤： 1、下载项目，找到这个colorui 文件夹，放到项目中 2、App.vue 引入关键Css main.css icon.css <style> @import "colorui/main.css"; @impo...
在uniapp中配置colorui及阿里图标
Sylvasylva的博客
10-25 2948
在uniapp中怎样配置并使用colorui组件及阿里矢量图标
微信小程序-colorUI组件库-自定义tabBar
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-13 3416
首先，我们需要了解一下，微信小程序中构造页面的两种方式 官方文档：注册页面 | 微信开放文档 (qq.com) 使用 Page 构造器注册页面 Page({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { //
Color-UI 简介及使用教程
interest_ing_的博客
07-11 8233
小程序开发最好用的组件库——ColorUI；用过就离不开了！这是一个鲜亮的高饱和色彩，专注视觉的小程序组件库 。ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。需要你引入样式后可以根据class来调用使用。只需要在HTML或wxml标签中加入想要样式的class类名，就可以调用组件库中提前编辑好的样式，大大提高了开发效率。
【已解决】使用custom自定义导航栏时，顶部标题变成空白格
苗老八的博客
07-25 1353
吐槽一下小程序，真得闹心。httpshttps。
＜cu-custom＞
weixin_42594143的博客
03-02 8057
使用ColorUI小程序自定义导航栏
死亡阿黑
04-09 5984
找了各种获取屏幕高度的方法，依然不能适配iphonex，后来使用的使用的ColorUI，没用过的自行百度，不引用ColorUI的话不知道会是什么效果。 首先将ColorUI项目中app.js的这段代码复制到自己的app.js中： //this最好改成自己声明的that，否则指针不对的话会报错 wx.getSystemInfo({ success: e => { t...
[每天进步一点点~] uni-app colorUi使用教程
DarlingYL的博客
11-12 1921
1.导入插件及配置 #从uni-app插件市场搜索colorUi，下载地址????https://ext.dcloud.net.cn/plugin?id=239 导入插件到项目中或者下载插件压缩包 下载插件压缩包的，将压缩包解压后的colorui文件夹复制到项目根目录下；导入插件不用进行此步操作。 App.vue 引入关键Css main.css icon.css &l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值