GraceUI5.0手册 (1) | 清弦子@博客

type

Post

status

Published

date

Apr 19, 2026

slug

grace5-01

summary

Grace5.0版本手册第一部分

数据格式转换

功能介绍

在日常的开发中，经常会遇到组件要求的数据格式与api接口返回的数据格式不一致的问题，可以通过以下方式来解决这个问题 :
改进后端输出符合组件要求的数据格式;
前端自己进行数据字段映射及转换;
我们提供了前端转换演示代码您可以理解以下原理，并灵活得使用在开发中。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

以 gui-speaker 组件为例，详情见注释及 js 源码。
UNI 普通版本

页面组件

组件介绍

在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。 GraceUI 发布了 gui-page 组件，来更高效的完成这项工作，您可以使用此组件完成各种模式的页面布局，同时页面组件还提供了挂件、全屏 Loading。当页面需要自定义头部导航或底部导航时我们推荐您使用 gui-page 组件作为页面根节点；

教程推荐

我们精心为您准备了关于gui-page组件的视频教程，请在付费用户群 > 群文件内下载并观看，gui-page 组件非常常用，推荐您深度学习理解一下（:

组件名称

gui-page : /graceUI/组件目录/gui-page

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
fullPage	Boolean	false	主体部分是否铺满屏幕
customHeader	Boolean	false	是否使用自定义头部导航
headerSets	Object	{height:44, zIndex:100} // 高度, z-index 值	自定义头部导航设置 [ 自定义模式有效 ]
headerStyle	String	background-color:#FFFFFF;	自定义头部导航样式 [ 自定义模式有效 ]
isHeaderSized	Boolean	true	是否启用自定义头部占位
statusBarStyle	String	background-color:#FFFFFF;	状态栏样式 [ 自定义模式有效 ]
customFooter	Boolean	false	是否使用自定义底部导航
footerSets	Object	{height:100, zIndex:100, bg:‘linear-gradient(to bottom, #FFFFFF,#FFFFFF)’}	自定义底部导航设置 [ 自定义模式有效 ]
iphoneXButtomStyle	String	’’	iphoneX 底部占位元素样式设置
pendantSets	Object	{width:‘100rpx’, right:‘25rpx’, bottom:‘100rpx’, zIndex:100}	页面右下角挂件设置
isLoading	Boolean	false	是否展示全屏加载
isSwitchPage	Boolean	false	页面是否为一个switchTab 页，影响如下 : 01. 不需要进行 iPhone 底部适配 02. 自定义底部导航 H5 端 bottom 值调整为 50px
refresh	Boolean	false	是否启用页面内置的下拉刷新
refreshText	Array	[‘继续下拉刷新’,‘松开手指开始刷新’,‘数据刷新中’,‘数据已刷新’]	下拉刷新过程组件文本
refreshBgColor	Array	[‘#FFFFFF’,‘#FFFFFF’,‘#FFFFFF’,‘#63D2BC’]	下拉刷新过程背景颜色
refreshColor	Array	[‘rgba(69, 90, 100, 0.6)’,‘rgba(69, 90, 100, 0.6)’,‘#63D2BC’,‘#FFFFFF’]	下拉刷新过程文本颜色
refreshFontSize	String	26rpx	下拉刷新组件文本尺寸
loadmore	Boolean	false	是否启用页面内置的加载更多
loadMoreText	Array	[’‘,’数据加载中’, ‘已加载全部数据’, ‘暂无数据’]	加载更多过程组件文本
loadMoreColor	Array	[‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.8)’,‘rgba(69, 90, 100, 0.8)’]	加载更多过程文本颜色
loadMoreStatus	Number	0 2022.05.12 新增	加载更多默认状态
loadMoreFontSize	String	26rpx	加载更多组件文本尺寸
apiLoadingStatus	Boolean	false	页面内 api 加载状态 true : api 数据加载中，false ：无加载执行作用 : 避免刷新、加载同时执行引发冲突
headerSizedStyle	String	’’ 2021.08.23 新增属性	开启自定义头部导航时，占位 view 样式
fixedTopZIndex	number	2 2021.08.23 新增属性	吸顶插槽 z-inddex 值

组件插槽

gHeader - 页面头部插槽，包含手机状态栏;gBody - 页面主体插槽，用于承载页面内容布局；gFooter - 页面底部插槽，用于承载自定义底部导航；gPendant - 页面右下角挂件插槽，用于实现返回顶部、客服、多功能菜单等功能；gFixedTop - 吸顶原生插槽, 紧贴顶部导航的 fixed 定位；

皮肤样式

您可以通过修改对应皮肤的样式来修改页面组件的相关样式，具体如下 :

组件方法

getDomSize : 功能 : 获取插槽的尺寸参数 : 01 选择器 : guiPageHeader - 自定义头部导航、guiPageBody - 页面主体、guiPageFooter - 页面自定义底部 02 自定义回调函数，携带参数 : 选中dom的尺寸信息示例 :

setScrollTop : 功能 : 设置内置滚动区域的 scroll-top 值 [ 2021.07.29 新增 ];

演示代码

UNI 普通版本

请点击手册左侧列表（页面布局部分），查看和学习我们提供的多种模式的页面布局演示。也推荐您在 “GraceUI 付费群” 内下载页面组件相关的视频教程进行学习，页面组件是一个基础且常用的组件，希望大家可以深度理解，灵活运用。

页面布局演示

演示说明

基于原生导航的页面布局, 演示全屏 loading 及右下角挂件实现.全屏加载组件用法见 : https://www.graceui.com/v5/info/10183-10.html

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

自定义头部导航

布局说明

开启自定义头部导航 : navigationStyle:custom;使用 gui-header-leading 组件实现返回按钮及回到主页按钮;只有返回按钮的代码见演示代码注释部分;

组件名称

gui-header-leading : /graceUI/组件目录/gui-header-leading

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
homePage	String	/pages/index/index	应用入口页面路径
bgStyle	String	’’	组件样式，如 : background-color:#FF0036;width:180rpx;… 注意 : 使用此属性会产生内联样式，权限高于皮肤样式;
buttonStyle	String	’’	按钮样式，如 :color:#FF0036; font-size:50rpx;… 注意 : 使用此属性会产生内联样式，权限高于皮肤样式;
onlyBack	Boolean	false	是否只展示返回按钮
onlyHome 2021.12.29 新增	Boolean	false	是否只展示主页按钮

组件事件

演示代码

UNI 普通版本

动态头部导航

布局介绍

演示实验自定义头部导航，修改组件属性；页面滚动时头部自定义导航透明度变化效果;关闭自定义导航头部占位，可以实现头部一张图片填充的效果;利用 onPageScroll 函数，详解演示代码;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

双击返回顶部

组件介绍

利用 gui-page 组件的 gotoTop 事件，双击头部导航返回顶部；

跨平台说明

由于 nvue 不支持操作页面滚动条，使用在 nvue 环境下使用 list 组件作为页面主体，使用 weex dom 对象来实现返回顶部功能；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

返回顶部

组件介绍

GraceUI 返回顶部组件会根据滚动位置自动展示或隐藏，vue 版本自动处理点击事件进行页面滚动条归零，nvue 触发事件用户通过控制滚动区域来实现返回顶部；

组件名称

gui-totop : /graceUI/组件目录/gui-totop

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
top	Number	0	页面或滚动区域滚动条的滚动值
color	String	#008AFF	图标颜色
bottom	String	80rpx	bottom 值
right	String	30rpx	right 值
background	String	#FFFFFF	背景颜色
borderRadius	String	6rpx	组件圆角尺寸
zIndex	Number	9	z-index 值，非有效
fontSize	String	44rpx	图标尺寸

演示代码

UNI 普通版本

返回顶部

组件介绍

此页面演示场景 : 使用 gui-page 组件实现内置加载更多（页面主体是一个内置竖向滚动区域）；实现功能 : 实现内置滚动区域滚动条归零，从而实现返回顶部功能；

重要函数

gui-page 组件的 setScrollTop() 函数，用于设置内置滚动区域滚动条位置；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

自定义底部导航

演示介绍

自定义底部导航演示，适用于商品详情界面，演示代码带有详细注释，请跟据项目需要进行二次开发。

底部插槽说明

GraceUI 底部插槽会自动躲避 iphone 手机的底部按钮，默认样式 : {height:100, zIndex:100, bg:‘linear-gradient(to bottom, #FFFFFF,#FFFFFF)’} 您可以通过 gui-page 组件的 footerSets 属性修饰其样式，高度，z-index 等信息;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

自定义底部TabBar

布局介绍

使用自定义底部导航;自定义底部导航按钮，演示了凸出定位按钮布局；实现页面主体切换、底部导航动态切换逻辑;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

吸顶元素

组件介绍

利用 gui-page 组件的 gFixedTop 插槽，可以快速、稳定的实现一个吸顶元素（紧贴头部导航的 fixed 定位元素）；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

使用说明

请在页面主体开始部分添加一个与吸顶元素等高的占位元素（paddin-top 或者 margin-top 皆可）；

演示代码

UNI 普通版本

动态吸顶

原理介绍

监听页面滚动事件，根据滚动高度动态决定某个元素是否使用吸顶样式 gui-fixed-top ;
说明 :
演示代码演示了动态计算某个元素高度的方法，理解一下可以在开发中灵活运用；
nvue 平台使用2份相同元素方式实现动态吸顶效果详见演示代码；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

吸顶+滚动主体布局

布局介绍

01 页面开启自定义头部导航 :
{
“pages”: [
{
“path” : “pages/test/test”,
“style” :
{
“navigationBarTitleText”: ““,
“enablePullDownRefresh”: false,
“navigationStyle” : “custom”
}
}, ] } 02 使用 gui-page 组件内置的刷新、加载功能； 03 演示系统自动计算头部导航、底部导航及核心主体部分的高度； 04 演示更多关于头部、底部导航的配置；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

iphone底部适配

组件介绍

gui-iphone-bottom 用于躲避 iPhone X、iPhone 11 12 系列手机的底部按键。注意事项：
针对小程序端（app 端及 uni-app 底层已经处理，h5 端不能正确识别）；
switch 页面不需要使用组件；
gui-page 组件的 gFooter 插槽已经实现此功能，不需要重复使用；

组件名称

gui-iphone-bottom : /graceUI/组件目录/gui-iphone-bottom

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
height	String	50rpx	躲避占位view高度
isSwitchPage	Boolean	false	是否为一个 switch 页面

演示代码

小程序胶囊按钮躲避组件

组件介绍

在小程序平台，如果原生导航栏被隐藏（使用自定义导航），仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。GraceUI 为您提供了胶囊躲避组件，方便开发者布局顶部内容时避开该按钮。

组件名称

gui-mp-menu-spacing : /graceUI/组件目录/gui-mp-menu-spacing

兼容平台

H5	APP	小程序	NVUE
不需要使用组件	不需要使用组件	✔ 支付宝小程序不需要（组件已自动处理）	不需要使用组件

演示代码

UNI 普通版本

下拉选择

组件介绍

下拉选择组件可以自动弹出下拉菜单，提供选择功能，常用于页面顶部的筛选、排序等功能的开发；

组件名称

gui-select-menu : /graceUI/组件目录/gui-select-menu

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	数组	[‘选项’, ……]	下拉菜单选项
titleColor	字符串	#2B2E3D	展示标题颜色
color	字符串	#2B2E3D	列表文本默认颜色
iconColor	字符串	rgba(69, 90, 100, 0.3)	箭头图标颜色
activeColor	字符串	#008AFF	选中项目文本颜色
selectIndex	数值	0	默认选中的项目索引
fontSize	字符串	26rpx	选项文本大小
padding	字符串	0 20rpx nuve : 20rpx	组件内间距，nvue 支持一个值
isH5header	布尔	true	h5端专用，如果使用自定义导航，请将此属性修改为 false
zIndex	数值	9999	下拉菜单层级属性
isInput	布尔	false	是否开启选项输入功能
placeholder	String	自定义	自定义输入框提示文本
addBtnName	String	+ 添加	自定义输入功能按钮名称
itemHeight 2021.10.22 新增	String	88rpx	选项列表高度
inputType 2022.03.24 新增	String	add	输入框功能， add : 添加选项， search : 搜索选项

组件事件

组件方法

演示代码

UNI 普通版本

文本尺寸及修饰

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

样式名称	定义位置	作用
.gui-text	皮肤样式文件	规范通用文本、尺寸、行高及颜色
.gui-text-small	皮肤样式文件	规范通用小字体、尺寸及行高
.gui-h1 ~ .gui-h6	皮肤样式文件	规范标题文本尺寸
.gui-text-left	核心样式文件	文本左对齐
.gui-text-center	核心样式文件	文本居中对齐
.gui-text-right	核心样式文件	文本右对齐
.gui-ellipsis	核心样式文件	文本溢出省略 ( nvue 溢出隐藏 )
.gui-bold	核心样式文件	文本加粗
.gui-line-through	核心样式文件	贯穿线 ( 删除线 )
.gui-underline	核心样式文件	下划线
.gui-italic	核心样式文件	文本倾斜
.gui-indent	皮肤样式文件	文本缩进 56rpx

演示代码

UNI 普通版本

内置颜色

颜色介绍

GraceUI 在 5.0.1.3 [ 2021.03.19 发布的版本 ] 版本添加了内置颜色库，位置 : /GraceUI5/css/colors.css。您可以使用它们，也可以在基础上添加、改进出一份更符合自己要求的颜色库（方法 : 复制一份 colors.css 名称为自己的 .css 改进后使用）

注意事项

核心样式 graceUI.css 内已经提供了一些基础颜色

请在项目颜色较为复杂的情况下使用 colors.css，或者建议您查看 colors.css 颜色效果（ hx 编辑器内代开 colors.css 就可以看到颜色），把需要的颜色样式复制到 app.vue 的 style 内或者自定义皮肤样式内使用。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

使用方法

用途	用法
文本色	gui-color-颜色名称
背景色	gui-bg-颜色名称

演示代码

UNI 普通版本

定位样式

样式介绍

GraceUI 内置了 absolute 和 fixed 两种模式的定位样式，您可以使用他们快速实现定位布局；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

属性名称	样式值	作用
.gui-relative	position:relative;	声明 view position:relative，一般用于 absolute 元素的父级元素。
.gui-absolute-lt	position:absolute; z-index:2; left:0; top:0;	absolute 左上
.gui-absolute-rt	position:absolute; z-index:2; right:0; top:0;	absolute 右上
.gui-absolute-lb	position:absolute; z-index:2; left:0; bottom:0;	absolute 左下
.gui-absolute-rb	position:absolute; z-index:2; right:0; bottom:0;	absolute 右下
.gui-fixed-lt	position:fixed; z-index:2; left:0; top:0;	fixed 左上
.gui-fixed-rt	position:fixed; z-index:2; right:0; top:0;	fixed 右上
.gui-fixed-lb	position:fixed; z-index:2; left:0; bottom:0;	fixed 左下
.gui-fixed-rb	position:fixed; z-index:2; right:0; bottom:0;	fixed 右下

演示代码

UNI 普通版本

手势操作

组件介绍

gui-touch 组件可以用于识别页面元素的手指移动、手指滑动、缩放、点击手势。目前版本最多支持2指事件。

组件名称

gui-touch : /graceUI/组件目录/gui-touch

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
datas	Array	[]	组件附带数据，触发事件时会原样带回给组件调用者

演示代码

UNI 普通版本

内置图标

图标说明

图标字体文件位置 : /GraceUI5/css/graceUI.ttf，通过下载框架获取；
为了更好的兼容各平台，自 2021年04月23日起，图标字体目录调整为 : /static/grace.ttf 通过下载框架获取；
为了多平台统一请使用 Unicode 方式实现图标；
请通过演示代码获取对应的 Unicode 数据；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

在线预览

请访问 https://www.graceui.com/graceUIIcons/ 预览图标并获取 Unicode;

扩展图标教程

[ 教程地址 ] : 请在 “GraceUI 已付费用户群” 的群文件内下载观看视频教程。

演示代码

UNI 普通版本

按钮样式

重要说明

为了保证多平台按钮样式一致性，请使用 default 类型的按钮，然后使用背景色、文本色、边框色等样式对其进行样式修饰 :

按钮样式封装在皮肤样式内 : /skin/项目使用皮肤.css，您可以根据项目需要进行修改。
如果不是必须使用
组件来实现的点击按钮我们推荐您使用 view + 点击效果来实现（例子见演示代码），多平台样式统一性更好。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

标题、更多、换一批

布局介绍

我们为您准备了标题、更多、换一批的基础样式，使用样式组合的方式更加灵活，您可以根据自己的项目需要添加样式进行具体的改进；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

说明 : 把需要点击的元素改成 navigator 组件或者添加 @tap 就可以实现点击跳转功能；

UNI 普通版本

动画效果

动画介绍

nvue 模式不支持 css 动画，使用 weex animation 模块来实现;
提供 weex.animation 示例，请理解原理并改进使用; 相关文档 : https://weex.apache.org/zh/docs/modules/animation.html#transition
vue 环境下动画库基于 animate.css , 以样式形式提供了多种动画预设效果;

兼容平台

H5	APP	小程序	NVUE
✔ 样式模式	✔ 样式模式	✔ 样式模式	✔ js api 模式

vue 模式预设动画效果

动画样式名称	效果
bounce	回弹
flash	闪烁
pulse	脉冲
rubberBand	橡皮筋
shake	晃动
headShake	摇头
swing	摇摆
tada	缩放加摇摆
wobble	大幅度摇摆
jello	果冻
heartBeat	心跳
bounceIn	跳动进入
bounceInDown	向下飞入
bounceInLeft	左侧飞入
bounceInRight	右侧飞入
bounceInUp	向上飞入
bounceOutDown	向下飞出
bounceOutLeft	左侧飞出
bounceOutRight	右侧飞出
bounceOutUp	向上飞出
fadeIn	渐变进入
fadeInDown	渐变向下进入
fadeInDownBig	渐变向下进入大幅度
fadeInLeft	渐变左侧进入
fadeInLeftBig	渐变左侧进入大幅度
fadeInRight	渐变右侧进入
fadeInRightBig	渐变右侧进入大幅度
fadeInUp	渐变向上进入
fadeInUpBig	渐变向上进入大幅度
fadeOut	渐变消失
fadeOutDown	向下淡出
fadeOutDownBig	向下淡出大幅度
fadeOutLeft	左侧淡出
fadeOutLeftBig	左侧淡出大幅度
fadeOutRight	右侧淡出
fadeOutRightBig	右侧淡出大幅度
fadeOutUp	向上淡出
fadeOutUpBig	向上淡出大幅度
flip	快速翻转
flipInX	水平翻转
flipInY	垂直翻转
flipOutX	水平翻转后消失
flipOutY	垂直翻转后消失
lightSpeedIn	光速侠进入
lightSpeedOut	光速侠消失
rotateIn	旋转进入
rotateInDownLeft	旋转左下为轴
rotateInDownRight	旋转右下为轴
rotateInUpLeft	旋转左上为轴
rotateInUpRight	旋转右上为轴
rotateOut	旋转淡出
rotateOutDownLeft	旋转左下为轴淡出
rotateOutDownRight	旋转右下为轴淡出
rotateOutUpLeft	旋转左上为轴淡出
rotateOutUpRight	旋转右上为轴淡出
hinge	合页
jackInTheBox	动态盒子
rollIn	滚动进入
rollOut	滚动淡出
zoomIn	缩放进入
zoomInDown	向下缩放进入
zoomInLeft	从左缩放进入
zoomInRight	从右缩放进入
zoomInUp	向上缩放进入
zoomOut	缩放消失
zoomOutDown	向下缩放消失
zoomOutLeft	从左缩放消失
zoomOutRight	从右缩放消失
zoomOutUp	向上缩放消失
slideInLeft	左侧滑入
slideInRight	右侧滑入
slideInUp	顶部滑入
slideOutDown	底部滑出
slideOutLeft	左侧滑出
slideOutRight	右侧滑出
slideOutUp	顶部滑出

演示代码

UNI 普通版本

Flex布局

Flex 介绍

GraceUI 完全基于 flex 布局，并提供了全面的 flex 布局样式，您可以利用它们快速的完成自己的页面布局。 Flex 布局教程推荐 : https://lesscode.work/courses/620617edac7da.html

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

样式名称	作用
.gui-flex	声明 flex 布局
.gui-rows	声明子元素排列方式为横向
.gui-columns	声明子元素排列方式为竖向
.gui-wrap	横向换行，空间不足时元素会换行
.gui-nowrap	横向不换行，空间不足时元素会压缩并保持在一行内
.gui-space-between	主轴两端对齐
.gui-justify-content-start	主轴起始端对齐
.gui-justify-content-center	主轴居中对齐
.gui-justify-content-end	主轴结束端对齐
.gui-align-items-start	侧轴起始端对齐
.gui-align-items-center	侧轴居中对齐
.gui-align-items-end	侧轴结束端对齐
.gui-flex1	元素自动扩大占满剩余空间

模式差别

Flex 布局在 nvue 和 vue 模式下有一下不同 :
nvue 下默认竖向排列，vue 下默认横向排列，解决方案声明主轴方式， gui-rows ( 横向 ) 或者 gui-columns ( 竖向 );
nvue 不支持 flex-shark，所以在弹性布局时，动态宽度的元素使用 gui-flex1 来使目标元素放大，其余元素保持不变;

演示代码

UNI 普通版本

Flex横向布局

组件介绍

gui-row 组件可以快速实现 flex 横向布局 [ 此组件发布于 2021年12月02日 15:50 请注意更新 ~ ] 。 Flex 布局教程推荐 : https://lesscode.work/courses/620617edac7da.html

组件名称

gui-row : /graceUI/组件目录/gui-row

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
wrap	Boolean	false	内部元素超出宽度是否换行
mainAxisAlignment	string	flex-start	主轴对齐方式 : flex-start 基于左侧开始对齐 flex-end 基于右侧对齐 center 居中对齐 space-around 均匀排列每个元素每个元素周围分配相同的空间 space-between 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点参考 : https://www.runoob.com/cssref/css3-pr-justify-content.html
crossAxisAlignment	string	flex-start	交叉轴对齐方式 : flex-start 基于顶部对齐 flex-end 基于底部对齐 center 居中对齐参考 https://www.runoob.com/cssref/css3-pr-align-items.html
customStyle	string	’’	自定义行内样式，如 : background:#FF0000;
customClasses	array	[]	自定义样式类，如 [‘gui-margin-top’,‘gui-bg-green’]

演示代码

UNI 普通版本

Flex竖向布局

组件介绍

gui-column 组件可以快速实现 flex 竖向布局。[ 此组件发布于 2021年12月02日 15:50 请注意更新 ~ ] Flex 布局教程推荐 : https://lesscode.work/courses/620617edac7da.html

组件名称

gui-column : /graceUI/组件目录/gui-column

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
mainAxisAlignment	string	flex-start	主轴对齐方式 : flex-start 基于左侧开始对齐 flex-end 基于右侧对齐 center 居中对齐 space-around 均匀排列每个元素每个元素周围分配相同的空间 space-between 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点参考 : https://www.runoob.com/cssref/css3-pr-justify-content.html
crossAxisAlignment	string	flex-start	交叉轴对齐方式 : flex-start 基于顶部对齐 flex-end 基于底部对齐 center 居中对齐参考 https://www.runoob.com/cssref/css3-pr-align-items.html
customStyle	string	’’	自定义样式，如 : background:#FF0000;
customClasses	array	[]	自定义样式类，如 : [‘gui-margin-top’,‘gui-bg-green’]

演示代码

UNI 普通版本

介绍

Grace.js 介绍

Grace.js 是 GraceUI 框架的 js 工具，目标是 : 简化您的 api 操作，同时提供丰富、好用的 js 工具函数，大幅度提高您的开发效率。

目录结构

使用 Grace.js

温馨提示

Grace.js 目标是更快、更省事。但是任何工具都需要一个熟悉的过程，所以我们建议您熟悉手册，熟悉函数的功能、参数、返回值。如果您发现了好用、常用的 js 工具包也可以联系我们将它扩展到 Grace.js 内，感谢您的一路相伴~

网络请求

Grace.js - 网络请求函数封装了 get 及 post 方法，用于简化 uni.request 函数。

.get()

函数功能 : 网络请求 get 方式对应手册 : https://uniapp.dcloud.io/api/request/request 函数参数 :

参数名称	必填	默认值	作用
url	是	ㅤ	请求地址
data	否	{}	对象形式的url参数
headers	否	{}	设置请求的 header
success	是	ㅤ	请求成功时执行的函数
fail	否	请求失败函数	请求失败时执行的函数

示例 :

带 header 的 get 示例

.post()

函数功能 : 网络请求 post 方式对应手册 : https://uniapp.dcloud.io/api/request/request 函数参数 :

参数名称	必填	默认值	作用
url	是	ㅤ	请求地址
data	否	{}	对象形式的 POST 数据
contentType	是	ㅤ	请求数据类型 form/json
headers	否	{}	设置请求的 header
success	是	ㅤ	请求成功时执行的函数
fail	否	请求失败函数	请求失败时执行的函数

演示代码

setBefore()

功能 : 设置请求前置函数参数 : 一个自定义函数

setAfter()

功能 : 设置请求后置函数参数 : 一个自定义函数

演示代码

页面跳转

Grace.js - 页面跳转函数用于简化 uni 页面跳转 api 。

.navigate()

函数功能 : 页面跳转对应手册 : https://uniapp.dcloud.io/api/router?id=navigateto 函数参数 :

参数名称	必填	默认值	作用
url	是	ㅤ	跳转页面的相对路径
type	否	navigateTo	页面跳转类型，可设置的值 : navigateTo, redirectTo, switchTab, reLaunch
success	否	空函数	页面跳转成功后执行的函数
fail	否	空函数	页面跳转失败时执行的函数
complete	否	空函数	页面跳转完成时执行的函数

演示代码

.back()

函数功能 : 返回指定层级的页面对应手册 : https://uniapp.dcloud.io/api/router?id=navigateback 函数参数 : delta 默认 1 示例代码

本地缓存

Grace.js - 数据缓存函数以同步的方式封装了uni.setStorage 函数，简化了数据缓存的操作代码。

setStorage()

函数功能 : 批量设置缓存数据 ( 同步模式 ) 对应手册 : https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync 函数参数 :

参数名称	必填	默认值	作用
data	是	ㅤ	对象形式的需要设置的缓存数据，如：{name:“grace”, ……}

函数返回值 : 执行成功返回 true, 执行失败返回 false；

演示代码

getStorage()

函数功能 : 获取指定key的缓存数据（同步模式）对应手册 : https://uniapp.dcloud.io/api/storage/storage?id=getstoragesync 函数参数 :

参数名称	必填	默认值	作用
keyName	是	ㅤ	指定缓存数据的 key

函数返回值 : 获取到缓存数据并且数据不为空时返回对应数据, 否则返回 false；

演示代码

removeStorage()

函数功能 : 删除指定key的缓存数据（同步模式）对应手册 : https://uniapp.dcloud.io/api/storage/storage?id=removestoragesync 函数参数 :

参数名称	必填	默认值	作用
keyName	是	ㅤ	指定缓存数据的 key

函数返回值 : 执行成功返回 true, 否则返回 false；

演示代码

clearStorage()

函数功能 : 清空应用的全部缓存数据（同步模式）对应手册 : https://uniapp.dcloud.io/api/storage/storage?id=clearstoragesync 函数参数 : 无函数返回值 : 无

演示代码

图片操作

Grace.js - 图片函数简化了图片选择、预览等相关 api 。

chooseImgs()

函数功能 : 选择图片对应手册 : https://uniapp.dcloud.io/api/media/image?id=chooseimage 函数参数 :

参数名称	必填	默认值	作用
sets	是	{count:1,sizeType:[‘original’, ‘compressed’],sourceType:[‘album’, ‘camera’]}	基础配置对象
success	是	ㅤ	选择图片后执行的函数
fail	否	ㅤ	客户取消选择后执行的函数
complete	否	ㅤ	完成选择时执行的函数

说明 sets 设置为 {} 代表 sets = {count:1,sizeType:[‘original’, ‘compressed’],sourceType:[‘album’, ‘camera’]} 请根据业务需求具体设置即可，**

sets 对象介绍** :

参数名称	作用
count	最多可以选择的图片张数，默认 1
sizeType	original 原图，compressed 压缩图，默认二者都有
sourceType	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

演示代码

getImageInfo()

函数功能 : 获取图片信息对应手册 : https://uniapp.dcloud.io/api/media/image?id=getimageinfo 函数参数 :

参数名称	必填	默认值	作用
imgUrl	是	ㅤ	图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
success	是	ㅤ	接口调用成功的回调函数 ( 执行时携带图片信息 )
fail	否	ㅤ	执行失败时执行的函数
complete	否	ㅤ	执行完成时执行的函数

演示代码

previewImage()

函数功能 : 预览图片对应手册 : https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject 函数参数 :

参数名称	必填	默认值	作用
items	是	ㅤ	数组形式的图片地址列表
currentImg	否	ㅤ	current 为当前显示图片的链接，不填或填写的值无效则为 urls 的第一张

演示代码

系统信息

Grace.js - 系统信息获取函数在 uni.getSystemInfo 函数基础上添加了 iphoneX 11 设备的判断。

system()

函数功能 : 获取运行环境信息相关手册 : https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync

返回数据

参数	说明	平台差异说明
brand	手机品牌	App、微信小程序、百度小程序、头条小程序、QQ小程序
model	手机型号	ㅤ
pixelRatio	设备像素比	ㅤ
screenWidth	屏幕宽度	ㅤ
screenHeight	屏幕高度	ㅤ
windowWidth	可使用窗口宽度	ㅤ
windowHeight	可使用窗口高度	ㅤ
windowTop	可使用窗口的顶部位置	App、H5
windowBottom	可使用窗口的底部位置	App、H5
statusBarHeight	状态栏的高度	头条小程序不支持
navigationBarHeight	导航栏的高度	百度小程序
titleBarHeight	标题栏高度	支付宝小程序
language	应用设置的语言	头条小程序不支持
version	引擎版本号	H5不支持
storage	设备磁盘容量	支付宝小程序
currentBattery	当前电量百分比	支付宝小程序
appName	宿主APP名称	头条小程序
AppPlatform	App平台	QQ小程序
host	宿主平台	百度小程序
app	当前运行的客户端	支付宝小程序
cacheLocation	上一次缓存的位置信息	百度小程序
system	操作系统版本	ㅤ
platform	客户端平台，值域为：ios 、android	ㅤ
fontSizeSetting	用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px	微信小程序、支付宝小程序、百度小程序、QQ小程序
SDKVersion	客户端基础库版本	支付宝小程序和H5不支持
swanNativeVersion	宿主平台版本号	百度小程序
albumAuthorized	允许微信使用相册的开关（仅 iOS 有效）	微信小程序
cameraAuthorized	允许微信使用摄像头的开关	微信小程序
locationAuthorized	允许微信使用定位的开关	微信小程序
microphoneAuthorized	允许微信使用麦克风的开关	微信小程序
notificationAuthorized	允许微信通知的开关	微信小程序
notificationAlertAuthorized	允许微信通知带有提醒的开关（仅 iOS 有效）	微信小程序
notificationBadgeAuthorized	允许微信通知带有标记的开关（仅 iOS 有效）	微信小程序
notificationSoundAuthorized	允许微信通知带有声音的开关（仅 iOS 有效）	微信小程序
bluetoothEnabled	蓝牙的系统开关	微信小程序
locationEnabled	地理位置的系统开关	微信小程序
wifiEnabled	Wi-Fi 的系统开关	微信小程序
safeArea	在竖屏正方向下的安全区域	App、H5、微信小程序
safeAreaInsets	在竖屏正方向下的安全区域插入位置（2.5.3+）	App、H5、微信小程序
iPhoneXBottomHeightPx	iphoneX 及 11 底部导航建议高度（ px ）	0 或 25px
iPhoneXBottomHeightRpx	iphoneX 及 11 底部导航建议高度（ rpx ）	0 或者 50rpx

适应说明 当您需要获取页面宽高、兼容 iphoneX 底部按钮时可以使用此函数来获取运行环境，便于后续功能代码的编写。

演示代码

消息提示

Grace.js - 消息提示函数简化了 toast 及 loading 函数用法。

msg()

功能 : 等于 uni.showToast() 弹出一个没有图标的消息框; 参数 : 消息内容演示 :

showLoading()

功能 : 展示加载动画参数 : 加载动画是展示的文本演示 :

头部导航设置

Grace.js - 头部导航设置函数简化了头部导航 api 的用法，可以快速实现导航标题、样色等相关的配置。

setNavBar()

功能 : 根据设置信息设置动态改变头部导航栏参数 : sets 一个对象，格式如下 :

属性名称	示例值	作用
title	字符串形式的标题	修改头部导航标题·
color	{frontColor:“#ffffff”, backgroundColor:“#ff0000”}	设置头部导航的背景颜色及文本颜色
loading	true / false	是否展示头部导航的 loading

注意事项

演示代码

底部导航操作

演示介绍

本页面用于演示使用 js 来动态设置底部导航，以上面的顶部导航操作对应（函数较为简单，所以没有进行封装）；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

元素选择

Grace.js 元素选择函数基于 uni.createSelectorQuery() 进行封装，使您的元素选择工作更加便利。注意 : 因底层原因不支持 nuve，nvue 请使用 dom 对象获取元素，具体代码请参考本页提供的示例。

select()

函数功能 : 获取单个元素函数参数 : dom 选择器 ( id选择器、class选择器等 )

selectAll()

函数功能 : 获全部元素函数参数 : dom 选择器 ( id选择器、class选择器等 )

元素的信息结构

演示代码

UNI 普通版本

ref获取

功能介绍

给组件设置 ref 属性后我们可以通过 this.refs[属性] 来获取组件，然后基于 ref 完成更多操作。但在vue 诸多生命周期内直接使用是不行的，因为生命周期执行时组件尚未创建完毕。graceJS 为您提供了 getRefs() 函数可以保证在任何生命周期内成功获取 ref。

函数 getRefs

参数 : 1 ref 名称 2 this 为了保持 this 作用域 3 0 起始次数 4 回调函数，当成功获取到 ref 时执行，传递 ref 数据

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

字符串工具

工具介绍

GraceUI 内置的字符串提供了字符串长度获取、去除空格、截取、等常用的字符串操作功能; js 文件位置 : /Grace.JS/graceString.js

使用方法

var graceString = require(‘@/Grace.JS/graceString.js’); graceString.相关函数()

count()

函数功能 : 计算字符串长度函数参数 : 01. 字符串 02. 是否计算空格( 可选参数默认 true ) 函数返回 : 整数形式的字符长度演示代码 :

removeAllSpace()

函数功能 : 去除字符串内的全部空格函数参数 : 01. 字符串函数返回 : 去除空格后的字符串演示代码 :

trim | trimL | trimR()

函数功能 : 去除字符串内的首尾 | 左侧 | 右侧空格函数参数 : 01. 字符串函数返回 : 去除空格后的字符串演示代码 :

search()

函数功能 : 字符串搜索函数参数 : 01. 被字符串 02. 要搜索的字符 03. 是否区分大小写 [ 默认 true 区分大小写 ] 函数返回 : 查找成功返回字符位置 ( 包含0 )，查找失败返回 -1 演示代码 :

getExtension()

函数功能 : 获取字符串中的扩展名函数参数 : 01. 被字符串函数返回 : 字符串中扩展名的部分演示代码 :

数组操作

Grace.js 为您封装了数组相关的常用操作函数，简化您的开发。

arrayConcat()

函数功能 : 合并多个数据函数参数 : 多个数组返回值 : 合并后的数组 演示代码

arrayDrop()

函数功能 : 删除数组内的指定元素函数参数 : 1 数组 2 起始索引 [ 可选参数默认 0 ] 3 删除数量 [ 可选参数默认 1] 返回值 : 删除元素后的新数组 演示代码

arrayIndexOf()

函数功能 : 在数组内查找指定元素函数参数 : 1 数组 2 要查找的元素返回值 : 查询到数据返回数组元素对应的索引，查询不到返回 -1 演示代码

arrayDifference()

函数功能 : 比较2个数组的不同的值函数参数 : 数组1 , 数组2 返回值 : 数组形式的差值 演示代码

arrayShuffle()

函数功能 : 数组随机排序函数参数 : 数组返回值 : 重新排序后的数组 演示代码

arraySum()

函数功能 : 对数值型数组求和函数参数 : 数组返回值 : 和 演示代码

arrayAvg()

函数功能 : 对数值型数组进行平均值计算函数参数 : 数组返回值 : 平均值 演示代码

arrayEach()

函数功能 : 遍历数组函数参数 : 1 数组， 2 遍历时执行的函数 演示代码