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

手册版本 V5.0

动画介绍

01. nvue 模式不支持 css 动画,使用 weex animation 模块来实现;
提供 weex.animation  示例,请理解原理并改进使用; 相关文档 : https://weex.apache.org/zh/docs/modules/animation.html#transition
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 后可以查阅完整手册内容 。