账户中心 退出系统
6.0 版本 5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
6.0 版本 5.0 版本 3.0 版本
快速开始
框架介绍版权要求
更新日志
常见问题
框架部署目录结构
版本差别V 3 ~ 6
主题设置
深色模式
nvue 说明
数据转换格式问题
防抖节流技巧文章
页面布局 ( 12 )
页面组件 独创 · 好用
全屏加载 + 挂件
自定义头部返回 · 主页
动态头部导航
双击返回顶部
单击返回顶部
自定义底部导航
吸顶插槽布局
动态吸顶布局
iPhone 底部适配
小程序胶囊按钮躲避
下拉选择筛选 · 排序
页面背景色设置外链技巧
Flex 布局 ( 2 )
Flex 布局样式模式
Flex 布局组件模式
基础样式 ( 9 )
文本样式
内置颜色
徽章角标
定位样式absolute · fixed
按钮样式
常用标题
动画效果
图标使用使用及扩展
手势操作触屏 · 缩放
Grace.JS ( 18 )
工具介绍
网络请求
页面跳转
数据缓存
图片操作
设备信息
消息提示
头部导航 动态设置
底部导航 动态设置
元素选择
ref 获取 跨生命周期
字符常用
数组操作
随机数据
日期时间
延时循环
对象操作
MD5 加密
请求工具 ( 7 )
请求库介绍
GET 请求
POST 请求
POST 签名验证
文件上传
登录相关
后端代码 php 版本示例
常用组件 ( 12 )
图片组件
搜索组件
标签组件
星级组件
倒计时组件
链接组件
多图选择
多图上传
头像群组
数值动画
PK 投票
抽奖转盘
常用布局 ( 11 )
宫格布局
普通表格
排序组件
数据表格
横向公告
时间轴布局
步骤展示
骨架加载
瀑布流布局
启动页广告
底部分享
列表布局 ( 8 )
普通列表
滑动列表
可选列表
全选列表
树状列表
排序列表
卡片列表
卡片视图
切换布局 ( 9 )
切换导航单行
切换导航多行
局部选项卡
全屏选项卡
分段切换
折叠面板
竖向切换
分类切换
城市选择
滚动 · 轮播 ( 8 )
滚动区域
进度滚动
滚动公告
无缝滚动横向文本形式
无缝滚动横向卡片形式
竖向公告顺序卡片形式
轮播组件
主体滚动
刷新加载 ( 8 )
全屏加载
下拉刷新基于页面组件
加载更多基于页面组件
刷新和加载基于页面组件
返回顶部基于页面组件
刷新和加载自定义组合
刷新和加载原生组合模式
为空展示
弹层 · 对话框 ( 6 )
遮罩弹层
头部消息框
模态对话框
底部操作表
右侧菜单
弹出菜单
表单相关 ( 15 )
表单布局
表单验证
提交按钮
字数限制
功能标签 选择 · 删除
动态表单
分步提交
步进器
数字键盘
车牌键盘
滑动解锁
进度滑块
区间滑块
点选按钮
地区联动 省市区三级
日期时间 ( 6 )
日历日期 带有农历及时间
日期区间 日历形式
日期时间 picker 模式
时间段选择 picker 模式
日程日历 日程 · 提醒
横向日历 布局模式
文章相关 ( 10 )
文章列表 基础用法
文章列表 切换模式
文章列表 全屏选项卡模式
编辑器 自主研发 · 多端兼容
格式转换 后端转换为 HTML
文章详情 编辑器解析
富文本加强 字符串转数组
展开阅读
评论布局
评论提交
媒体播放 ( 2 )
音乐播放器
视频播放器
地图使用 ( 3 )
位置标注
地图周边
拖拽定位
用户模板 ( 10 )
用户登录
手机登录
短信登录
短信验证
用户协议
个人中心
头像剪裁
证件上传
会员排行榜
手写签名
电商常用 ( 9 )
商品列表
商品详情
订单中心
购物车模板
排序与筛选
地址列表
地址添加
抽奖模板
优惠券组件
即时通讯 ( 3 )
消息展示组件
消息输入组件
消息列表布局
画布绘图 ( 3 )
二维码生成
条形码生成
海报生成
动画效果

手册版本 V6.0

动画介绍

01. nvue 模式不支持 css 动画,使用 weex animation 模块来实现;
提供 weex.animation  示例,请理解原理并改进使用; 相关文档 : https://uniapp.dcloud.io/tutorial/nvue-api.html#animation
02. vue 环境下动画库基于 animate.css , 以样式形式提供了多种动画预设效果;

兼容平台

H5APP小程序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 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。