mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs: 补充组件描述
This commit is contained in:
parent
e9bab1bc39
commit
403a2893bd
@ -1,5 +1,9 @@
|
|||||||
# ActionSheet 上拉菜单
|
# ActionSheet 上拉菜单
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
底部弹起的模态面板,包含与当前情境相关的多个选项。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Button 按钮
|
# Button 按钮
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
按钮用于触发一个操作,如提交表单。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Calendar 日历
|
# Calendar 日历
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
日历组件用于选择日期或日期区间。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Card 商品卡片
|
# Card 商品卡片
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
商品卡片,用于展示商品的图片、价格等信息。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Cell 单元格
|
# Cell 单元格
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
单元格为列表中的单个展示项。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Checkbox 复选框
|
# Checkbox 复选框
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
在一组备选项中进行多选。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
@ -185,7 +189,7 @@ Page({
|
|||||||
this.setData({
|
this.setData({
|
||||||
result: event.detail
|
result: event.detail
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
|
||||||
toggle(event) {
|
toggle(event) {
|
||||||
const { index } = event.currentTarget.dataset;
|
const { index } = event.currentTarget.dataset;
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Circle 环形进度条
|
# Circle 环形进度条
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
圆环形的进度条组件,支持进度渐变动画。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Collapse 折叠面板
|
# Collapse 折叠面板
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# CountDown 倒计时
|
# CountDown 倒计时
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于实时展示倒计时数值,支持毫秒精度。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -2,9 +2,7 @@
|
|||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
|
|
||||||
弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作,支持函数调用和组件调用两种方式。
|
||||||
|
|
||||||
弹出框组件支持函数调用和组件调用两种方式
|
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Divider 分割线
|
# Divider 分割线
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于将内容分隔为多个区域。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# DropdownMenu 下拉菜单
|
# DropdownMenu 下拉菜单
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
向下弹出的菜单列表。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# GoodsAction 商品导航
|
# GoodsAction 商品导航
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于为商品相关操作提供便捷交互。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
|
|
||||||
基于字体的图标集, 可以通过 Icon 组件使用,也可以在其他组件中通过`icon`属性引用
|
基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# IndexBar 索引栏
|
# IndexBar 索引栏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于列表的索引分类显示和快速定位。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Loading 加载
|
# Loading 加载
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
加载图标,用于表示加载中的过渡状态。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# NavBar 导航栏
|
# NavBar 导航栏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
为页面提供导航功能,常用于页面顶部。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# NoticeBar 通告栏
|
# NoticeBar 通告栏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于循环播放展示一组消息通知。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Notify 消息提示
|
# Notify 消息提示
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
在页面顶部展示消息提示,支持函数调用和组件调用两种方式。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Progress 进度条
|
# Progress 进度条
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于展示操作的当前进度。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Radio 单选框
|
# Radio 单选框
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
在一组备选项中进行单选。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Rate 评分
|
# Rate 评分
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于对事物进行评级操作。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Search 搜索
|
# Search 搜索
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于搜索场景的输入框组件。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Sidebar 侧边导航
|
# Sidebar 侧边导航
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Skeleton 骨架屏
|
# Skeleton 骨架屏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于在内容加载过程中展示一组占位图形。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Slider 滑块
|
# Slider 滑块
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
滑动输入条,用于在给定的范围内选择一个值。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Steps 步骤条
|
# Steps 步骤条
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# SubmitBar 提交订单栏
|
# SubmitBar 提交订单栏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于展示订单金额与提交订单。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# SwipeCell 滑动单元格
|
# SwipeCell 滑动单元格
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
可以左右滑动来展示操作按钮的单元格组件。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Switch 开关
|
# Switch 开关
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于在打开和关闭状态之间进行切换。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Tab 标签页
|
# Tab 标签页
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
选项卡组件,用于在不同的内容区域之间进行切换。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Tabbar 标签栏
|
# Tabbar 标签栏
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
底部导航栏,用于在不同页面之间进行切换。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Tag 标签
|
# Tag 标签
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于标记关键词和概括主要内容。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Toast 轻提示
|
# Toast 轻提示
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Transition 动画
|
# Transition 动画
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
使元素从一种样式逐渐变化为另一种样式的效果。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# TreeSelect 分类选择
|
# TreeSelect 分类选择
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于从一组相关联的数据集合中进行选择。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# Uploader 文件上传
|
# Uploader 文件上传
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑,该步骤需要自行实现。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
|
||||||
@ -186,7 +190,7 @@ Page({
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
// 上传图片
|
// 上传图片
|
||||||
uploadToCloud() {
|
uploadToCloud() {
|
||||||
wx.cloud.init();
|
wx.cloud.init();
|
||||||
const { fileList } = this.data;
|
const { fileList } = this.data;
|
||||||
if (!fileList.length) {
|
if (!fileList.length) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user