ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 指南

    • 介绍
    • 快速上手
    • 配置
    • 页面 ui-sys
    • 内置
    • 背景颜色 bg
    • 文本字体 text
    • 字体图标 icon
    • 阴影 shadow
    • 边框 border
    • 其它样式

内置

内置了一些变量、方法函数。

内置变量

内置了一些全局变量,可以直接全局使用的,这些变量是对一些系统API进行了封装。

系统信息

在 wxml 中使用:

<view data-value="{{sys_info.statusBarHeight}}">

在 js 中使用:

let sys_info = this.data.sys_info;
console.log(sys_info)

提示

sys_info 变量,获取系统信息,对应 wx.getSystemInfoSync(),参考 微信官方文档

状态栏高度

在 wxml 中使用:

<view data-value="{{sys_statusBar}}">

在 js 中使用:

let sys_statusBar = this.data.sys_statusBar;
console.log(sys_statusBar)

提示

sys_statusBar 变量,获取系统状态栏高度,对应 wx.getSystemInfoSync().statusBarHeight

顶部高度

在 wxml 中使用:

<view data-value="{{sys_navBar}}">

在 js 中使用:

let sys_navBar = this.data.sys_navBar;
console.log(sys_navBar)

提示

sys_navBar 变量,获取系统状态栏高度并+50,对应 wx.getSystemInfoSync().statusBarHeight + 50

胶囊信息

在 wxml 中使用:

<view data-value="{{sys_capsule.top}}">

在 js 中使用:

let sys_capsule = this.data.sys_capsule;
console.log(sys_capsule)
{ 
  bottom: 56, 
  height: 32, 
  left: 278, 
  right: 365, 
  top: 24, 
  width: 87
}

提示

sys_capsule 变量,获取胶囊信息,对应 wx.getMenuButtonBoundingClientRect(),参考 微信官方文档

内置方法

页面返回函数

提示

ColorUI3.x 微信小程序版本因为所有页面都需要包裹 ui-sys ,所以对于大多数返回函数都无法使用,ColorUI为您在所有页面注册了返回函数,在需要返回的函数里调用 this._backPage() 注意this 作用域的问题。

返回首页

提示

在需要返回的函数里调用 this._toHome() 注意this 作用域的问题。

切换主题

提示

在需要切换主题的地方调用 this._setTheme() 注意this 作用域的问题。

设置主颜色

提示

在需要设置主颜色的地方调用 this._setMain() 注意this 作用域的问题。

设置字号等级

提示

在需要设置字号等级的地方调用 this._setText() 注意this 作用域的问题。

Prev
页面 ui-sys
Next
背景颜色 bg