.jpg?table=collection&id=aeb9995f-c21f-83d9-b9b7-07efa597272a&t=aeb9995f-c21f-83d9-b9b7-07efa597272a)
type
Post
status
Published
date
Apr 19, 2026
slug
grace5-02
summary
Grace5.0版本手册第二部分
tags
graceui
category
GraceUI手册
icon
password
随机数
Grace.js 的随机数据生成函数包含 : 随机数值和随机字符串2种功能。
random
函数功能 : 产生指定区间的随机数
函数参数 : 最小值, 最大值
返回值 : 随机数
演示代码
uuid
UUID 是指 Universally Unique Identifier，是通用唯一识别码，UUID 的目的是产生一个唯一的识别信息。
函数功能 : 产生指定长度的UUID
函数参数 : 长度 ( 可选参数建议 36 位以上 )
返回值 : UUID 字符串
演示代码
日期时间
Grace.js 对日期时间操作函数进行了封装，为您的开发提供便利~
now()
函数功能 : 获取当前时间信息
函数参数 :
1、返回值格式 ( number - 返回时间戳, str - 返回 字符串形式的时间, array - 数组形式的年月日时分秒数据，方便组合出各种形式 )
2、修正数值，单位 : 毫秒
返回值 : 合并后的数组
演示代码
toDate()
函数功能 : 将时间戳转换为字符串或者数组形式的字符串时间
函数参数 :
1、时间戳( 自动识别毫秒或秒形式)
2、返回值类型 ( str - 字符串形式 , array - 数值形式便于自己转换其他形式 )
返回值 : 指定形式的转换数据
演示代码
toTimeStamp()
函数功能 : 将字符串时间转换为时间戳
函数参数 : 字符串形式的时间，支持格式 : YYYY-MM-DD HH:ii:ss 或 MM/DD/YYYY HH:ii:ss
返回值 : 数值形式的时间戳
演示代码
fromTime()
函数功能 : 根据时间戳计算多少分钟/小时/天之前
函数参数 : 时间戳 13位或10位
返回值 : 计算后的时间信息
演示代码
举一反三
延时循环
delay()
函数功能 : 获取当前时间信息
函数参数 :
1、延迟时间
2、延迟后执行的函数
返回值 : setTimeout 产生的 id, 可以使用 clearTimeout() 清除延迟
演示代码
interval()
函数功能 : 间隔指定的时间循环执行某个函数
函数参数 :
1、间隔时间
2、需要执行的函数
返回值 : setInterval 产生的 id, 可以使用 clearclearInterval() 清除循环
演示代码
对象操作
assign()
函数功能 : 注册对象的属性和值
函数参数 :
1、对象
2、属性名称
3、对应属性的值
演示代码
removeByKey()
函数功能 : 删除对象的某个属性
函数参数 :
1、对象
2、属性名称
演示代码
each()
函数功能 : 遍历对象
函数参数 :
1、对象
2、遍历时执行的函数
演示代码
isEmptyObj()
函数功能 : 判断某个对象是否为空
函数参数 : 对象
返回值 : true / false
演示代码
MD5加密
组件介绍
Grace.js 为您封装了 MD5 加密函数，您可以使用它来完成 MD5 加密工作。
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
演示代码
GraceRequest介绍
GraceRequest 请求工具介绍
GraceRequest 意在为大家提供一个更简洁的、更安全的请求工具，提供了全局 token 验证机制及签名校验机制以及会员校验机制，可以大幅度增加接口交互过程的安全； 我们为您提供了此工具的视频教程，包含后端原理，建议您在 GraceUI 已付费用户群 内下载观看；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
流程介绍
UNI 普通版本
全局部署
局部使用
GET请求
GraceRequest GET 请求
GraceRequest 的 GET 请求，基于 token 验证，实现了异步同步两种方式；同步方式会阻塞逻辑，在非必须使用同步的情况下我们建议您使用异步方式；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
.get() 异步模式
.getSync() 同步模式
同步模式返回值
使用 await 需要声明 async 函数；同步模式将不再使用回调函数而是直接返回请求结果，请求失败时结果为 false，请求成功为 api 数据；
演示代码
UNI 普通版本
.get 异步请求示例
.get 同步请求示例
POST请求
GraceRequest POST 请求
GraceRequest 的 POST 请求，基于 token 验证，实现了异步同步两种方式；同步方式会阻塞逻辑，在非必须使用同步的情况下我们建议您使用异步方式；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
.post() 异步模式
.postSync() 同步模式
同步模式返回值
使用 await 需要声明 async 函数；同步模式将不再使用回调函数而是直接返回请求结果，请求失败时结果为 false，请求成功为 api 数据；
重要说明
演示代码
UNI 普通版本
异步请求示例
同步请求示例
upload文件上传
GraceRequest upload 文件上传
GraceRequest 的 upload 请求，基于 token 验证，实现更安全的文件上传方式；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
.upload() 函数介绍
演示代码
UNI 普通版本
POST签名验证
签名验证介绍
GraceRequest 的 POST 请求，还可以实现签名机制，使数据的交互更加安全； 整个签名过程已经通过内部函数自动实现，您只需要设置 uni.grequest.post() 函数的最后一个参数为 true 即可；
签名原理
演示代码
UNI 普通版本
异步请求示例
同步请求示例
签名验证值模式
签名验证 值模式
GraceRequest 的 POST 请求，还可以实现以数据值为基础的签名机制，使数据的交互更加安全； 整个签名过程已经通过内部函数自动实现，您只需要设置 uni.grequest.post() 函数的最后一个参数为 ‘value’ 即可；
签名原理
演示代码
UNI 普通版本
用户登录检查
相关介绍
GraceRequest 封装了用户登录检查功能，原理如下 :
- 用户登录会在本地数据记录用户的相关数据：
key : uToken，可以在 config.js 内配置名称 value : 用户数据表内生成的 token-用户 id 说明 : 之所以记录用户主键是为了更快的用户数据读取速度，如果不想暴露把token做成索引即可；
- 提供检查函数 checkLogin 检查用户是否已经登录；
- 提供未登录跳转函数 gotoLogin 来完成页面跳转;
- 提供 token 写入函数 writeLoginToken 来记录用户数据到本地；
用户数据表示例
演示代码
UNI 普通版本
检查登录及跳转
记录用户登录信息到本地
请求时带上用户 token
GraceRequest后端代码
GraceRequest 对应后端代码演示
我们只擅长 php，所以只提供了 php 版本的后端演示代码，其他语言原理是类似的，请观看视频教程理解原理使用自己项目对应的后端语言来实现自己的后端；
注意事项
在日常项目运行中，由于 token 服务器临时故障或重启时 ( 如 : 您使用 memcahce 服务 ) 会造成 token 数据批量丢失，然而用户本地却记录了已经丢失的 token 数据，GraceRequest 可以在满足一定条件的情况下自动删除用户本地端记录的 token，这样用户在下一次请求时会重新请求新的 token 从而解决服务端 token 数据丢失造成 token 数据一直不匹配问题，条件 : 后端返回 : JSON { “type” : “error”, “data”:“token error” }
演示代码
UNI 普通版本
图片组件
组件介绍
GraceUI 提供的图片用于基于宽度设定的等比缩放场景，nvue 模式下可以自动识别图片高度，并带有加载动画，加载失败提示。 注意 : 我们认为基于宽度的等比缩放是开发过程中最实用的方式，为了更好的兼容 nvue，我们对图片宽度、高度做了计算并以样式形式固定，所以无法使用类似原生图片组件的 mode 属性，如果您的开发必须使用 mode 属性请使用原生 imgae 组件;
组件名称
gui-image : /graceUI/组件目录/gui-image
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
src | String | ’’ | 图片路径 |
width | Number | 300 | 图片宽度，单位 rpx |
height | Number | 0 | 图片高度，单位 rpx，0 代表自动高度 |
timer | Number | 200 | 图片加载动画延时时间，单位 毫秒 |
borderRadius | String | 0rpx | 图片圆角 |
演示代码
UNI 普通版本
排序组件
组件介绍
gui-order 排序组件可以快速实现一个排序按钮，点击可切换排序方式。
组件名称
gui-order : /graceUI/组件目录/gui-order
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
size | Number | 18 | 箭头外层尺寸 |
fontSize | Number | 36 | 箭头尺寸（因图标占位问题，外层要小于字体大小） |
color | String | rgba(69, 90, 100, 0.3) | 默认箭头颜色 |
activeColor | String | #FF0036 | 激活箭头颜色 |
orderBy | Number | 0 | 默认排序方式 0 : 无排序，1 : 升序，2 : 降序 |
limit | Array | [0,2] | 可切换范围，如 [ 1, 2 ] 代表在升序降序间切换 |
组件事件
change : 当组件被点击, 排序数据发生变化时触发，携带数据 : 0 : 无排序，1 : 升序，2 : 降序
组件插槽
您可以通过插槽实现定义元素，参与点击及内容展示；
使用建议
请使用一个 view 包裹 gui-order 组件， 组件宽度等于外层宽度。
演示代码
请访问 : https://www.graceui.com/v5/info/10043-60.html
搜索组件
搜索框是较为常用的组件，GraceUI 搜索框组件具备配置灵活、功能全面等优点，您可以在页面布局中直接使用她~
组件名称
gui-search : /graceUI/组件目录/gui-search
组件属性
属性名称 | 类型 | 默认值 | 作用 |
height | String | 60rpx | 组件高度 |
background | String | #FFFFFF 白色 | 组件背景颜色 |
fontSize | String | 28rpx | 文本大小 |
iconWidth | String | 60rpx | 搜索图标宽度 |
iconColor | String | #A5A7B2 | 搜索图标颜色 |
iconFontSize | String | 30rpx | 搜索图标尺寸 |
inputHeight | String | 30rpx | 搜索框高度 |
inputFontSize | String | 26rpx | 搜索文本大小 |
placeholder | String | 关键字 | 搜索框提示文本 |
placeholderClass | String | ’’ | placeholder 自定义样式类 |
kwd | String | 空 | 默认搜索关键字 |
borderRadius | String | 60rpx | 组件圆角尺寸 |
disabled | Boolean | false | 输入框是否被禁用 |
focus | Boolean | false | 是否自动聚焦 |
clearBtn 2021.09.26 新增 | Boolean | true | 是否展示清除关键字按钮 |
disableColor 2021.10.22 新增 | String | #666666 | 禁用时组件文本颜色 |
组件事件
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
演示代码
UNI 普通版本
徽章角标
为了更加便捷、高效我们以样式形式来实现徽章，您可以通过重写样式来修改它们。
核心样式
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
演示代码
UNI 普通版本
标签组件
组件介绍
gui-tags 标签组件可以通过属性实现各种常见的展示标签；本组件使用场景适于展示和点击，我们还提供了删除标签和选择标签，请在手册列表查阅；
组件名称
gui-tags : /graceUI/组件目录/gui-tags
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
width | Number | 0 | 组件宽度，单位 rpx，0 代表自动宽度 |
text | String | ’’ | 标签文本 |
size | Number | 26 | 文本尺寸，单位 rpx |
lineHeight | Number | 1.8 | 行高比例，高度、行高=文本尺寸*行高比例 |
padding | Number | 15 | 内间距，单位 rpx |
margin | Number | 15 | 组件右侧、底部间距，单位 rpx |
bgClass | String | gui-bg-blue | 组件背景样式 |
color | String | #FFFFFF | 文本颜色 |
borderRadius | Number | 6 | 圆角尺寸，单位 rpx |
data | Array | [] | 组件点击时携带的数据 |
borderColor | String | #FFFFFF | 组件边框颜色，与背景色相同等于隐藏边框 |
组件事件
tapme : 组件被点击时触发，携带数据 data 属性对应的值;
演示代码
UNI 普通版本
功能标签
组件介绍
gui-stags 功能标签组件基于标签形式实现标签的选择和删除功能；
组件名称
gui-stags : /graceUI/组件目录/gui-stags
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
width | Number | 0 | 组件宽度，单位 rpx，0 代表自动宽度 |
text | String | ’’ | 标签文本 |
size | Number | 26 | 文本尺寸，单位 rpx |
lineHeight | Number | 1.8 | 行高比例，高度、行高=文本尺寸*行高比例 |
padding | Number | 15 | 内间距，单位 rpx |
margin | Number | 15 | 组件右侧、底部间距，单位 rpx |
defaultBg | String | gui-bg-blue | 组件背景样式 |
defaultColor | String | gui-primary-color | 文本颜色样式 |
borderRadius | Number | 6 | 圆角尺寸，单位 rpx |
tags | Array | [] | 标签项目数据，格式见演示代码 |
type | String | radio | radio 单选，checkbox 多选，remove 可删除 |
checkedBg | String | gui-bg-blue | 标签选中背景样式 |
checkedColor | String | gui-color-white | 标签选中文本样式 |
组件事件
change : 组件数据变化时触发，携带数据: 01 单选 : 有选中的项目 : {选中项目的数据 }, {标签数据}； 无选中的项目 : -1, {标签数据}02 多选 : [ 数组形式的多选项目的索引], {标签数据};03 删除 : 删除后新的 [ 标签数据 ];
演示代码
UNI 普通版本
星级组件
组件介绍
gui-star 星级组件用于展示星级、提交星级评价等场景；
组件名称
gui-star : /graceUI/组件目录/gui-star
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
fontSize | String | 50rpx | 图标字体大小 |
totalstars | Number | 5 | 星标总数 |
starnum | Number | 1 | 当前选中值 |
color | String | #E1E1E1 | 默认颜色 |
activecolor | String | #F5C359 | 选中颜色 |
cantap | Boolean | true | 是否允许点击星标更新数据 |
padding | String | 5rpx | 星标直接间距 |
修改图标
复制 gui-star 组件重命名为自己的组件( 不影响升级 );扩展一套自己的图标，将组件内的 gui-icons 样式换成您自己的图标样式；将 Unicode 更换为您的图标对应的值；调用您改进后的星标组件;
演示代码
UNI 普通版本
倒计时组件
组件名称
gui-count-down : /graceUI/组件目录/gui-count-down
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
bgColor | String | #FFFFFF | 计时区块背景颜色 |
borderColor | String | #FFFFFF | 计时区块边框颜色 |
fontColor | String | #2B2E3D | 计时区块文本颜色 |
size | Number | 26 | 计时区块文本尺寸，单位 rpx |
lineHeight | Number | 1.8 | 计时区块行高 |
splitorColor | String | rgba(69, 90, 100, 0.6) | 分隔符文本颜色 |
splitorText | Array | [‘天’, ‘时’, ‘分’, ‘秒’] | 分隔符文本 |
timer | String | ’’ | 目标时间，格式 YYYY-mm-dd HH:ii:ss，可以利用 grace.js 快速转换。 |
show | Boolean | true | 是否展示组件 |
spacing | String | 0rpx | 计时区块间距 |
组件方法
reSetTimer() 重置倒计时时间，参数 : 新的时间；getTimeRemaining() 获取倒计时剩余的秒数；
演示代码
UNI 普通版本
城市选择
功能介绍
1、搜索（中文、拼音、首字母）；2、点击右侧字母列表速达；3、热门、当前选择城市展示；4、整理了 2020 年最新的城市数据，数据地址 : /graceUI5/data/cityData.js；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
完整代码
UNI 普通版本
地区联动
组件介绍
gui-area-picker 地区联动选择组件可以实现省市区三级地区联动选择。
地区数据
级联数据以 .js 文件形式存储在 :
如项目需要对数据或者组件进行修改，请复制一份组件及数据文件，然后改成自己的组件调用（ 这样不影响框架升级 ）。
组件名称
gui-area-picker : /graceUI/组件目录/gui-area-picker
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
cancelText | String | 取消 | 取消按钮文本 |
cancelClass | String | gui-color-gray | 取消按钮样式 |
confirmText | String | 确定 | 确定按钮文本 |
confirmClass | String | gui-primary-color | 确定按钮样式 |
value | Array | [’‘,’‘,’’] | 默认值 |
level | Number | 3 | 联动层级 1-3 |
indicatorStyle | String | height:36px; line-height:36px; | 选项样式 |
组件方法
open() 打开组件close() 关闭组件
演示代码
UNI 普通版本
链接组件
组件介绍
自动分析运行环境；app 端使用 plus 打开浏览器；h5 端使用 a 标签新窗口打开；小程序平台不支持外部链接，显示网址；
组件名称
gui-link : /graceUI/组件目录/gui-link
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
url | String | ’’ | 链接地址 |
title | String | ’’ | 链接标题文本 |
color | String | #008AFF | 链接文本颜色 |
fontSize | String | 28rpx | 链接文本大小 |
lineHeight | String | 50rpx | 链接文本行高 |
演示代码
UNI 普通版本
为空组件
组件介绍
使用为空展示组件，完成2个插槽即可，请根据您的应用设计替换为空图片；
组件名称
gui-empty : /graceUI/组件目录/gui-empty
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件插槽
slot=“img” 为空图片插槽 slot=“text” 为空文本插槽 slot=“other” 其他自定义内容插槽
演示代码
UNI 普通版本
多图选择组件
组件介绍
GraceUI 多图选择组件以 uni.chooseImage 接口为基础，实现了多图选择、展示、预览、删除等功能；
组件名称
gui-choose-images : /graceUI/组件目录/gui-choose-images
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
maxFileNumber | Number | 9 | 最大图片选择数量 |
btnName | String | 添加图片 | 添加图片按钮文本 |
items | Array | [] | 默认图片数据 |
removeBtnColor | String | rgba(0, 0, 0, 0.8) | 删除按钮颜色 |
imgMode | String | widthFix | 图片 mode 属性值 |
sourceType | Array | [‘album’, ‘camera’] | 图片来源 album ：相机，camera 摄像头 |
borderRadius | String | 10rpx | 图片列表圆角尺寸 |
组件事件
重要说明
微信小程序端需要用户授权，教程 ：
https://www.lesscode.work/sections/0735aed114050bfc76953849840b05ca.html
演示代码
UNI 普通版本
多图上传组件
组件介绍
1、选择图片、预览图片、删除图片；2、支持默认值设置；4、完善的多图上传功能、带有上传进度 ；5、上传失败重试功能；6、上传成功返回图片数据并激活对应事件；
组件名称
gui-upload-images : /graceUI/组件目录/gui-upload-images
兼容平台
属性名称 | 类型 | 默认值 | 作用 |
maxFileNumber | 数字 | 9 | 最大图片选择数 |
btnName | 字符串 | 添加照片 | 按钮文本 |
removeBtnColor | 字符串 | rgba(0, 0, 0, 0.8) | 删除按钮文本颜色 |
uploadServerUrl | 字符串 | ㅤ | 上传服务器 api 地址 |
progressSize | 数字 | 1 | 进度条尺寸 |
progressColor | 字符串 | #27BD81 | 进度条激活颜色 |
progressBGColor | 字符串 | #F8F8F8 | 进度条背景颜色 |
fileName | 字符串 | img | 上传时的文件名 |
formData | 对象 | {} | 上传时携带的表单数据 |
imgMode | 字符串 | widthFix | 图片 mode 属性 |
header | 对象 | {} | 上传时携带的 header 数据 |
save2uniCloud | 布尔 | false | 为 true 时基于 uniCloud 将图片上传至 uniCloud 云存储中 |
sourceType | 数组 | [‘album’, ‘camera’] | 图片源类型 ‘album’ : 相册 , ‘camera’ : 摄像头 |
borderRadius | 字符串 | 0rpx | 组件圆角尺寸 |
maxFileSize | 数字 | 5 | 单图最大尺寸， 默认 5，单位 m ( 200k = 0.2m )2023.07.31 新增属性 |
uniCloud 使用说明
组件 <gui-upload-images …… :save2uniCloud=“true”>在 hx 内完成云服务空间配置工作，并选择阿里云
组件方法
后端api接口返回值格式
调试建议
php版后端代码示例
重要说明
微信小程序端需要用户授权，教程 ：
https://www.lesscode.work/sections/0735aed114050bfc76953849840b05ca.html
演示代码
UNI 普通版本
头像群组
组件名称
gui-face-group : /graceUI/组件目录/gui-face-group
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
items | Array | [] | 头像数据数组 |
size | Number | 80 | 头像尺寸，单位 rpx |
space | Number | 60 | 展示间距，单位 rpx |
borderWidth | Number | 4 | 边框尺寸，单位 rpx |
borderColor | String | ‘#F5F5F5’ | 边框颜色 |
isAddBtn | Boolean | false | 是否展示功能按钮 |
startIndex | Number | 100 | 头像起始 z-index 层级 |
演示代码
UNI 普通版本
数值动画
组件介绍
以递增 | 递减的方式展示一个数值;注意 : 如果您需要组件以整数形式递增，请将 keepInt 属性设为 true 并保证数值大于组件总步骤数 ;
组件名称
gui-number-animate : /graceUI/组件目录/gui-number-animate
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
num | Number | 0 | 需要展示的数值 |
stepNumber | Number | 50 | 动画步骤总数 |
timer | Number | 800 | 动画总时间 |
keepInt | Boolean | false | 保证整数递增 |
fontSize | String | 28rpx | 文本尺寸 |
color | String | #333333 | 文本颜色 |
lineHeight | String | 50rpx | 文本行高 |
fontWeight | String | 400 | 400-700 数值越大字体会被加粗 |
组件事件
@done 动画运行完成后触发 2021.12.27 添加
PK投票组件
组件名称
gui-pk : /graceUI/组件目录/gui-pk
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
width | String | 690rpx | 组件宽度 |
height | String | 260rpx | 组件高度 |
borderRadius | String | 8rpx | 组件圆角尺寸 |
title | Array | [’‘,’’] | [左侧标题, 右侧标题] |
btnName | String | 站队 | 投票按钮名称 |
status | String | button | 组件状态 button 代表按钮投票模式 , progress 代表 进度展示模式 |
progress | Array | [80,20,‘8000 票’, ‘2000 票’] | [左侧进度, 右侧进度, 左侧文本, 右侧文本] |
演示代码
UNI 普通版本
抽奖转盘
组件介绍
01 支持项目数 4, 6, 8 项，不够请使用 “谢谢参与”占位； 02 如果样式不能满足您的需要，请复制组件并重命名为自己的组件进行修改、调用；
组件名称
gui-turntable : /graceUI/组件目录/gui-turntable
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | 不支持 |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
rewardNames | Array | [““,”“,”“,”“,”“,””] | 奖品名称 |
rewardBGColors | Array | [] | 奖品展示区背景颜色 |
rewardColors | Array | [] | 奖品展示区文本颜色 |
fontSize | String | 32rpx | 文本尺寸 |
函数及事件
goto 函数 : 展示抽奖动画停止到指定奖项位置； end 事件 : 动画执行完毕激活，利用事件进行后续操作；
演示代码
UNI 普通版本
宫格布局
样式介绍
宫布局不适合封装组件故使用样式来实现，您可以通过复写下面的样式来修改宫格布局 : .gui-grids-items{width:138rpx;} // 宫格项目宽度 .gui-grids-icon{height:80rpx; font-size:68rpx; line-height:80rpx; text-align:center;} // 宫格图标默认样式 .gui-grids-icon-img{width:80rpx; height:80rpx; border-radius:6rpx;} // 宫格图片默认样式 .gui-grids-text{line-height:50rpx; text-align:center; font-size:24rpx; margin-top:2px;} // 宫格文本默认样式
宫格DOM结构
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
演示代码
UNI 普通版本
普通表格
布局介绍
uni-app底层并没有表格组件，我们使用 view 模拟实现了类似表格的布局，所以并没有 html 表格那样智能，需要合并、分割等功能请根据项目实际情况利用 flex 布局来实现。样式形式实现，可以灵活的进行扩展 ;演示了排序功能及排序算法实现 ;使用了 gui-order 排序按钮组件，手册 : https://www.graceui.com/v5/info/10044-40.html
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
完整代码
UNI 普通版本
数据表格
功能介绍
利用页面组件吸顶插槽完成吸顶式数据表头;数据主体、表头滑动双向跟随;app及小程序平台底层均没有表格组件，我们使用 view 模拟实现了类似表格的布局，所以并没有 html 表格那样智能，需要合并、分割等功能请利用 flex 布局，根据项目实际情况完成布局工作。
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
完整代码
UNI 普通版本
横向公告
组件名称
gui-box-banner : /graceUI/组件目录/gui-box-banner
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
items | Array | [] | 项目数据，格式见演示代码 |
color | Array | [‘#333333’, ‘rgba(69, 90, 100, 0.5)’, ‘rgba(69, 90, 100, 0.5)’] | 文本颜色 [主要数据, 单位 , 描述] |
fontSize | Array | [‘36rpx’, ‘24rpx’, ‘24rpx’] | 展示信息文本大小 [主要数据, 单位 , 描述] |
background | String | ’’ | 组件背景颜色 |
padding | String | 20rpx | 组件上下 padding 值 |
borderRadius | String | 10rpx | 组件圆角尺寸 |
lineHeight | String | 60rpx | 核心数据行高 |
borderColor | String | #F1F1F1 | 项目右边框颜色 |
borderWidth | String | 1px | 项目右边框宽度 2022.03.24 新增 |
borderStyle | String | solid | 项目右边框样式 2022.03.24 新增 |
borderHeight | String | 60px | 项目右边框高度 2022.03.24 新增 |
演示代码
UNI 普通版本
时间轴布局
布局结构
完整代码
UNI 普通版本
步骤展示
布局介绍
使用样式组合布局，请跟据项目实际需求进行二次开发；
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
完整代码
UNI 普通版本
骨架加载
骨架加载介绍
作用 : 使用骨架加载可以有效的防止页面布局抖动，减少页面加载时的白屏时间。 原理 : step 01. 使用预先规划基础骨架，骨架组件的插槽内放置加载后真实的元素内容; step 02. 数据加载后延迟一些时间渲染真实元素；
组件名称
gui-skeleton : /graceUI/组件目录/gui-skeleton
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
组件属性
属性名称 | 类型 | 默认值 | 作用 |
styles | String | ’’ | 预占位骨架样式 |
delayTime | Number | 800 | 渲染延迟事件，单位毫秒 |
canShow 2021.07.19 新增 | Boolean | true | 是否渲染实际内容 |
演示代码
UNI 普通版本
瀑布流布局
布局介绍
瀑布流数据的分配方式是左右均分;使用 gui-image 组件保证图片多平台兼容性;
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
布局代码
UNI 普通版本
应用启动轮播广告模板
组件介绍
1 利用本地存储判断是否展示启动轮播形式的广告图;2 带有跳过、关闭功能；3 自动识别屏幕高度并铺满屏幕；启动流程 :在应用启动后入口页根据 本地数据记录情况 决定打开一个新页面展示全屏轮播广告，点击关闭广告时关闭新打开的页面退回到入口页面。
兼容平台
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
页面配置
演示代码
UNI 普通版本
入口页面判断程序示例
全屏广告页面源码
- 作者:清弦子
- 链接:https://tangly1024.com/GraceUI%E6%89%8B%E5%86%8C/grace5-02
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章
