mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
Compare commits
4 Commits
e9bab1bc39
...
2b657446ec
| Author | SHA1 | Date | |
|---|---|---|---|
|
2b657446ec | ||
|
|
d82b491d29 | ||
|
|
c024430d4f | ||
|
|
403a2893bd |
@ -93,7 +93,7 @@ export default [
|
||||
list: [
|
||||
{
|
||||
path: '/action-sheet',
|
||||
title: 'ActionSheet 上拉菜单',
|
||||
title: 'ActionSheet 动作面板',
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
@ -155,7 +155,7 @@ export default [
|
||||
},
|
||||
{
|
||||
path: '/notice-bar',
|
||||
title: 'NoticeBar 通告栏',
|
||||
title: 'NoticeBar 通知栏',
|
||||
},
|
||||
{
|
||||
path: '/panel',
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "ActionSheet 上拉菜单"
|
||||
"navigationBarTitleText": "ActionSheet 动作面板"
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "NoticeBar 通告栏"
|
||||
"navigationBarTitleText": "NoticeBar 通知栏"
|
||||
}
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# ActionSheet 上拉菜单
|
||||
# ActionSheet 动作面板
|
||||
|
||||
### 介绍
|
||||
|
||||
底部弹起的模态面板，包含与当前情境相关的多个选项。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -81,7 +85,7 @@ Page({
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancel-text`属`性后，会在底部展示取消按钮，点击后关闭当前菜单
|
||||
设置`cancel-text`属`性后，会在底部展示取消按钮，点击后关闭当前菜单。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
@ -93,7 +97,7 @@ Page({
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
设置`description`属性后，会在选项上方显示描述信息
|
||||
设置`description`属性后，会在选项上方显示描述信息。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
@ -105,7 +109,7 @@ Page({
|
||||
|
||||
### 展示标题栏
|
||||
|
||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
|
||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容。
|
||||
|
||||
```html
|
||||
<van-action-sheet show="{{ show }}" title="标题">
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
省市区选择组件通常与 [弹出层](#/popup) 组件配合使用
|
||||
省市区选择组件通常与 [弹出层](#/popup) 组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -52,7 +52,7 @@ const areaList = {
|
||||
|
||||
### @vant/area-data
|
||||
|
||||
Vant 官方提供了一份默认的省市区数据，可以通过 [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data) 引入：
|
||||
Vant 官方提供了一份默认的省市区数据，可以通过 [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data) 引入。
|
||||
|
||||
```bash
|
||||
yarn add @vant/area-data
|
||||
@ -70,7 +70,7 @@ Page({
|
||||
|
||||
### 选中省市区
|
||||
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`。
|
||||
|
||||
```html
|
||||
<van-area area-list="{{ areaList }}" value="110101" />
|
||||
@ -78,7 +78,7 @@ Page({
|
||||
|
||||
### 配置显示列
|
||||
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择。
|
||||
|
||||
```html
|
||||
<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />
|
||||
@ -86,7 +86,7 @@ Page({
|
||||
|
||||
### 配置列占位提示文字
|
||||
|
||||
可以通过`columns-placeholder`属性配置每一列的占位提示文字
|
||||
可以通过`columns-placeholder`属性配置每一列的占位提示文字。
|
||||
|
||||
```html
|
||||
<van-area
|
||||
@ -149,7 +149,7 @@ db.collection('region')
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 Area 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 Area 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --- | --- | --- | --- |
|
||||
@ -157,11 +157,11 @@ db.collection('region')
|
||||
|
||||
### 点击完成时返回的数据格式
|
||||
|
||||
返回的数据整体为一个 Object，包含 `values`, `indexs` 两个 key
|
||||
返回的数据整体为一个 Object，包含 `values`, `indexs` 两个 key。
|
||||
|
||||
`values` 整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称。
|
||||
|
||||
```javascript
|
||||
[
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Button 按钮
|
||||
|
||||
### 介绍
|
||||
|
||||
按钮用于触发一个操作，如提交表单。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,7 +18,7 @@
|
||||
|
||||
### 按钮类型
|
||||
|
||||
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
|
||||
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`。
|
||||
|
||||
```html
|
||||
<van-button type="default">默认按钮</van-button>
|
||||
@ -26,7 +30,7 @@
|
||||
|
||||
### 朴素按钮
|
||||
|
||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
|
||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">朴素按钮</van-button>
|
||||
@ -35,7 +39,7 @@
|
||||
|
||||
### 细边框
|
||||
|
||||
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
|
||||
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现。
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">细边框按钮</van-button>
|
||||
@ -44,7 +48,7 @@
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，此时按钮的`bind:click`事件不会触发
|
||||
通过`disabled`属性来禁用按钮，此时按钮的`bind:click`事件不会触发。
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">禁用状态</van-button>
|
||||
@ -68,7 +72,7 @@
|
||||
|
||||
### 图标按钮
|
||||
|
||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
|
||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
@ -80,7 +84,7 @@
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`。
|
||||
|
||||
```html
|
||||
<van-button type="primary" size="large">大号按钮</van-button>
|
||||
@ -91,7 +95,7 @@
|
||||
|
||||
### 块级元素
|
||||
|
||||
通过`block`属性可以将按钮的元素类型设置为块级元素
|
||||
通过`block`属性可以将按钮的元素类型设置为块级元素。
|
||||
|
||||
```html
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
@ -99,7 +103,7 @@
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色
|
||||
通过`color`属性可以自定义按钮的颜色。
|
||||
|
||||
```html
|
||||
<van-button color="#7232dd">单色按钮</van-button>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Calendar 日历
|
||||
|
||||
### 介绍
|
||||
|
||||
日历组件用于选择日期或日期区间。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,7 +18,7 @@
|
||||
|
||||
### 选择单个日期
|
||||
|
||||
下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发`confirm`事件
|
||||
下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发`confirm`事件。
|
||||
|
||||
```html
|
||||
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
|
||||
@ -126,7 +130,7 @@ Page({
|
||||
|
||||
### 快捷选择
|
||||
|
||||
将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件
|
||||
将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件。
|
||||
|
||||
```html
|
||||
<van-calendar show="{{ show }}" show-confirm="{{ false }}" />
|
||||
@ -134,7 +138,7 @@ Page({
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效
|
||||
通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效。
|
||||
|
||||
```html
|
||||
<van-calendar show="{{ show }}" color="#07c160" />
|
||||
@ -164,7 +168,7 @@ Page({
|
||||
|
||||
### 自定义按钮文字
|
||||
|
||||
通过`confirm-text`设置按钮文字，通过`confirm-disabled-text`设置按钮禁用时的文字
|
||||
通过`confirm-text`设置按钮文字，通过`confirm-disabled-text`设置按钮禁用时的文字。
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
@ -214,7 +218,7 @@ Page({
|
||||
|
||||
### 自定义弹出位置
|
||||
|
||||
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
|
||||
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`。
|
||||
|
||||
```html
|
||||
<van-calendar show="{{ show }}" round="false" position="right" />
|
||||
@ -222,7 +226,7 @@ Page({
|
||||
|
||||
### 日期区间最大范围
|
||||
|
||||
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
|
||||
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。
|
||||
|
||||
```html
|
||||
<van-calendar type="range" max-range="{{ 3 }}" />
|
||||
@ -230,7 +234,7 @@ Page({
|
||||
|
||||
### 平铺展示
|
||||
|
||||
将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现
|
||||
将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现。
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
@ -293,7 +297,7 @@ Page({
|
||||
|
||||
### Day 数据结构
|
||||
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
@ -324,7 +328,7 @@ Page({
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 Calendar 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ---------------------- | ---- | ------ |
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Card 商品卡片
|
||||
|
||||
### 介绍
|
||||
|
||||
商品卡片，用于展示商品的图片、价格等信息。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -26,7 +30,7 @@
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以通过插槽添加定制内容
|
||||
可以通过插槽添加定制内容。
|
||||
|
||||
```html
|
||||
<van-card
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Cell 单元格
|
||||
|
||||
### 介绍
|
||||
|
||||
单元格为列表中的单个展示项。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -26,7 +30,7 @@
|
||||
|
||||
### 单元格大小
|
||||
|
||||
通过`size`属性可以控制单元格的大小
|
||||
通过`size`属性可以控制单元格的大小。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" value="内容" size="large" />
|
||||
@ -35,7 +39,7 @@
|
||||
|
||||
### 展示图标
|
||||
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
通过`icon`属性在标题左侧展示图标。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" icon="location-o" />
|
||||
@ -43,7 +47,7 @@
|
||||
|
||||
### 展示箭头
|
||||
|
||||
设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
|
||||
设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" is-link />
|
||||
@ -53,7 +57,7 @@
|
||||
|
||||
### 页面跳转
|
||||
|
||||
可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
|
||||
可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型。
|
||||
|
||||
```html
|
||||
<van-cell
|
||||
@ -66,7 +70,7 @@
|
||||
|
||||
### 分组标题
|
||||
|
||||
通过`CellGroup`的`title`属性可以指定分组标题
|
||||
通过`CellGroup`的`title`属性可以指定分组标题。
|
||||
|
||||
```html
|
||||
<van-cell-group title="分组1">
|
||||
@ -79,7 +83,7 @@
|
||||
|
||||
### 使用插槽
|
||||
|
||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容
|
||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容。
|
||||
|
||||
```html
|
||||
<van-cell value="内容" icon="shop-o" is-link>
|
||||
@ -95,7 +99,7 @@
|
||||
|
||||
### 垂直居中
|
||||
|
||||
通过`center`属性可以让`Cell`的左右内容都垂直居中
|
||||
通过`center`属性可以让`Cell`的左右内容都垂直居中。
|
||||
|
||||
```html
|
||||
<van-cell center title="单元格" value="内容" label="描述信息" />
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Checkbox 复选框
|
||||
|
||||
### 介绍
|
||||
|
||||
在一组备选项中进行多选。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -15,7 +19,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`value`绑定复选框的勾选状态
|
||||
通过`value`绑定复选框的勾选状态。
|
||||
|
||||
```html
|
||||
<van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>
|
||||
@ -37,7 +41,7 @@ Page({
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过设置`disabled`属性可以禁用复选框
|
||||
通过设置`disabled`属性可以禁用复选框。
|
||||
|
||||
```html
|
||||
<van-checkbox disabled value="{{ checked }}" bind:change="onChange">
|
||||
@ -47,7 +51,7 @@ Page({
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形。
|
||||
|
||||
```html
|
||||
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
|
||||
@ -57,7 +61,7 @@ Page({
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性可以自定义选中状态下的图标颜色
|
||||
通过`checked-color`属性可以自定义选中状态下的图标颜色。
|
||||
|
||||
```html
|
||||
<van-checkbox
|
||||
@ -71,7 +75,7 @@ Page({
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`icon-size`属性可以自定义图标的大小
|
||||
通过`icon-size`属性可以自定义图标的大小。
|
||||
|
||||
```html
|
||||
<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>
|
||||
@ -79,7 +83,7 @@ Page({
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标
|
||||
通过 icon 插槽自定义图标。
|
||||
|
||||
```html
|
||||
<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">
|
||||
@ -106,7 +110,7 @@ Page({
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
通过设置`label-disabled`属性可以禁用复选框文本点击
|
||||
通过设置`label-disabled`属性可以禁用复选框文本点击。
|
||||
|
||||
```html
|
||||
<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>
|
||||
@ -114,7 +118,7 @@ Page({
|
||||
|
||||
### 复选框组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
```html
|
||||
<van-checkbox-group value="{{ result }}" bind:change="onChange">
|
||||
@ -150,7 +154,7 @@ Page({
|
||||
|
||||
### 搭配单元格组件使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换。
|
||||
|
||||
```html
|
||||
<van-checkbox-group value="{{ result }}" bind:change="onChange">
|
||||
@ -185,7 +189,7 @@ Page({
|
||||
this.setData({
|
||||
result: event.detail
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toggle(event) {
|
||||
const { index } = event.currentTarget.dataset;
|
||||
@ -257,7 +261,7 @@ Page({
|
||||
|
||||
### Checkbox 方法
|
||||
|
||||
通过 selectComponent 可以获取到 checkbox 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| ------ | ---- | ------ | ------------ |
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Circle 环形进度条
|
||||
|
||||
### 介绍
|
||||
|
||||
圆环形的进度条组件，支持进度渐变动画。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -22,7 +26,7 @@
|
||||
|
||||
### 宽度定制
|
||||
|
||||
通过`stroke-width`属性来控制进度条宽度
|
||||
通过`stroke-width`属性来控制进度条宽度。
|
||||
|
||||
```html
|
||||
<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />
|
||||
@ -30,7 +34,7 @@
|
||||
|
||||
### 颜色定制
|
||||
|
||||
通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
|
||||
通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -43,7 +47,7 @@
|
||||
|
||||
### 渐变色
|
||||
|
||||
`color`属性支持传入对象格式来定义渐变色
|
||||
`color`属性支持传入对象格式来定义渐变色。
|
||||
|
||||
```html
|
||||
<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />
|
||||
@ -63,7 +67,7 @@ Page({
|
||||
|
||||
### 逆时针方向
|
||||
|
||||
将`clockwise`设置为`false`，进度会从逆时针方向开始
|
||||
将`clockwise`设置为`false`，进度会从逆时针方向开始。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -76,7 +80,7 @@ Page({
|
||||
|
||||
### 大小定制
|
||||
|
||||
通过`size`属性设置圆环直径
|
||||
通过`size`属性设置圆环直径。
|
||||
|
||||
```html
|
||||
<van-circle value="{{ value }}" size="120" text="大小定制" />
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -19,7 +19,7 @@ Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
### 基本用法
|
||||
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比。此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比。此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同。
|
||||
|
||||
```html
|
||||
<van-row>
|
||||
@ -40,7 +40,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
|
||||
### 设置列元素间距
|
||||
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为0。
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Collapse 折叠面板
|
||||
|
||||
### 介绍
|
||||
|
||||
将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -15,7 +19,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`value`控制展开的面板列表，`activeNames`为数组格式
|
||||
通过`value`控制展开的面板列表，`activeNames`为数组格式。
|
||||
|
||||
```html
|
||||
<van-collapse value="{{ activeNames }}" bind:change="onChange">
|
||||
@ -46,7 +50,7 @@ Page({
|
||||
|
||||
### 手风琴
|
||||
|
||||
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
|
||||
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式。
|
||||
|
||||
```html
|
||||
<van-collapse accordion value="{{ activeName }}" bind:change="onChange">
|
||||
|
||||
@ -6,7 +6,7 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
|
||||
|
||||
### 引入
|
||||
|
||||
在 app.wxss 中引入内置样式
|
||||
在 app.wxss 中引入内置样式。
|
||||
|
||||
```css
|
||||
@import '@vant/weapp/common/index.wxss';
|
||||
@ -20,17 +20,17 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
|
||||
|
||||
```xml
|
||||
<view class="van-ellipsis">
|
||||
这是一段宽度限制 250px 的文字，后面的内容会省略
|
||||
这是一段宽度限制 250px 的文字，后面的内容会省略。
|
||||
</view>
|
||||
|
||||
<!-- 最多显示两行 -->
|
||||
<view class="van-multi-ellipsis--l2">
|
||||
这是一段最多显示两行的文字，后面的内容会省略
|
||||
这是一段最多显示两行的文字，后面的内容会省略。
|
||||
</view>
|
||||
|
||||
<!-- 最多显示三行 -->
|
||||
<view class="van-multi-ellipsis--l3">
|
||||
这是一段最多显示三行的文字，后面的内容会省略
|
||||
这是一段最多显示三行的文字，后面的内容会省略。
|
||||
</view>
|
||||
```
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# CountDown 倒计时
|
||||
|
||||
### 介绍
|
||||
|
||||
用于实时展示倒计时数值，支持毫秒精度。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -10,13 +14,13 @@
|
||||
}
|
||||
```
|
||||
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)。
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基本用法
|
||||
|
||||
`time`属性表示倒计时总时长，单位为毫秒
|
||||
`time`属性表示倒计时总时长，单位为毫秒。
|
||||
|
||||
```html
|
||||
<van-count-down time="{{ time }}" />
|
||||
@ -32,7 +36,7 @@ Page({
|
||||
|
||||
### 自定义格式
|
||||
|
||||
通过`format`属性设置倒计时文本的内容
|
||||
通过`format`属性设置倒计时文本的内容。
|
||||
|
||||
```html
|
||||
<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />
|
||||
@ -40,7 +44,7 @@ Page({
|
||||
|
||||
### 毫秒级渲染
|
||||
|
||||
倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
|
||||
倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染。
|
||||
|
||||
```html
|
||||
<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
|
||||
@ -48,7 +52,7 @@ Page({
|
||||
|
||||
### 自定义样式
|
||||
|
||||
设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格
|
||||
设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格。
|
||||
|
||||
```html
|
||||
<van-count-down use-slot time="{{ time }}" bind:change="onChange">
|
||||
@ -88,7 +92,7 @@ Page({
|
||||
|
||||
### 手动控制
|
||||
|
||||
通过 `selectComponent` 选择器获取到组件实例后，可以调用`start`、`pause`、`reset`方法
|
||||
通过 `selectComponent` 选择器获取到组件实例后，可以调用`start`、`pause`、`reset`方法。
|
||||
|
||||
```html
|
||||
<van-count-down
|
||||
@ -161,7 +165,7 @@ Page({
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 CountDown 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
用于选择时间，支持日期、时分等时间维度，通常与 [弹出层](#/popup) 组件配合使用
|
||||
用于选择时间，支持日期、时分等时间维度，通常与 [弹出层](#/popup) 组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
### 选择完整时间
|
||||
|
||||
`value` 为时间戳
|
||||
`value` 为时间戳。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
@ -50,7 +50,7 @@ Page({
|
||||
|
||||
### 选择日期（年月日）
|
||||
|
||||
`value` 为时间戳，通过传入 `formatter` 函数对选项文字进行处理
|
||||
`value` 为时间戳，通过传入 `formatter` 函数对选项文字进行处理。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
@ -70,7 +70,8 @@ Page({
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`;
|
||||
} else if (type === 'month') {
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`;
|
||||
}
|
||||
return value;
|
||||
@ -87,7 +88,7 @@ Page({
|
||||
|
||||
### 选择日期（年月）
|
||||
|
||||
`value` 为时间戳
|
||||
`value` 为时间戳。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
@ -115,7 +116,7 @@ Page({
|
||||
|
||||
### 选择时间
|
||||
|
||||
`value` 为字符串
|
||||
`value` 为字符串。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
@ -145,7 +146,7 @@ Page({
|
||||
|
||||
### 选项过滤器
|
||||
|
||||
通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔
|
||||
通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
|
||||
@ -2,13 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
||||
|
||||
弹出框组件支持函数调用和组件调用两种方式
|
||||
弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -20,7 +18,7 @@
|
||||
|
||||
### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
用于提示一些消息，只包含一个确认按钮。
|
||||
|
||||
```html
|
||||
<van-dialog id="van-dialog" />
|
||||
@ -45,7 +43,7 @@ Dialog.alert({
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```html
|
||||
<van-dialog id="van-dialog" />
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Divider 分割线
|
||||
|
||||
### 介绍
|
||||
|
||||
用于将内容分隔为多个区域。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
@ -10,7 +14,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)。
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# DropdownMenu 下拉菜单
|
||||
|
||||
### 介绍
|
||||
|
||||
向下弹出的菜单列表。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -168,7 +172,7 @@ Page({
|
||||
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 selectComponent(id) 可访问
|
||||
通过 selectComponent(id) 可访问。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
空状态时的占位提示
|
||||
空状态时的占位提示。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
### 图片类型
|
||||
|
||||
Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用
|
||||
Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。
|
||||
|
||||
```html
|
||||
<!-- 通用错误 -->
|
||||
@ -37,7 +37,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
### 自定义图片
|
||||
|
||||
需要自定义图片时，可以在 image 属性中传入任意图片 URL
|
||||
需要自定义图片时，可以在 image 属性中传入任意图片 URL。
|
||||
|
||||
```html
|
||||
<van-empty
|
||||
@ -49,7 +49,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
### 底部内容
|
||||
|
||||
通过默认插槽可以在 Empty 组件的下方插入内容
|
||||
通过默认插槽可以在 Empty 组件的下方插入内容。
|
||||
|
||||
```html
|
||||
<van-empty description="描述文字">
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
表单中的输入框组件
|
||||
用户可以在文本框内输入或编辑文字。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -44,7 +44,7 @@ Page({
|
||||
|
||||
### 双向绑定
|
||||
|
||||
最低基础库版本在 2.9.3 以上时，可以使用[简易双向绑定](https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html)
|
||||
最低基础库版本在 2.9.3 以上时，可以使用[简易双向绑定](https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html)。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -66,7 +66,7 @@ Page({
|
||||
|
||||
### 自定义类型
|
||||
|
||||
根据`type`属性定义不同类型的输入框
|
||||
根据`type`属性定义不同类型的输入框。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -107,7 +107,7 @@ Page({
|
||||
|
||||
### 错误提示
|
||||
|
||||
通过`error`或者`error-message`属性增加对应的错误提示
|
||||
通过`error`或者`error-message`属性增加对应的错误提示。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -129,7 +129,7 @@ Page({
|
||||
|
||||
### 内容对齐方式
|
||||
|
||||
可以通过`input-align`属性设置内容的对齐方式
|
||||
可以通过`input-align`属性设置内容的对齐方式。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -144,7 +144,7 @@ Page({
|
||||
|
||||
### 高度自适应
|
||||
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -161,7 +161,7 @@ Page({
|
||||
|
||||
### 插入按钮
|
||||
|
||||
通过 button slot 可以在输入框尾部插入按钮
|
||||
通过 button slot 可以在输入框尾部插入按钮。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -187,11 +187,11 @@ Page({
|
||||
|
||||
由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。
|
||||
|
||||
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
|
||||
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)。
|
||||
|
||||
### 真机上 placeholder 为什么会盖过 popup 等其它组件？
|
||||
|
||||
由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看[原生组件说明](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
|
||||
由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看[原生组件说明](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)。
|
||||
|
||||
### textarea 的 placeholder 在真机上为什么会偏移？
|
||||
|
||||
@ -201,13 +201,13 @@ Page({
|
||||
|
||||
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
|
||||
|
||||
微信已经在 `2.10.0` 基础库版本后支持移除默认的 `padding`，但低版本仍有问题。详情可以查看 [微信开放社区](https://developers.weixin.qq.com/community/develop/issue/96)
|
||||
微信已经在 `2.10.0` 基础库版本后支持移除默认的 `padding`，但低版本仍有问题。详情可以查看 [微信开放社区](https://developers.weixin.qq.com/community/develop/issue/96)。
|
||||
|
||||
### 手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？
|
||||
|
||||
这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 `blur` 事件中取到输入的值。
|
||||
|
||||
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098)
|
||||
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098)。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# GoodsAction 商品导航
|
||||
|
||||
### 介绍
|
||||
|
||||
用于为商品相关操作提供便捷交互。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -12,7 +16,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)。
|
||||
|
||||
## 代码演示
|
||||
|
||||
@ -45,7 +49,7 @@ Page({
|
||||
|
||||
### 提示信息
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
@ -59,7 +63,7 @@ Page({
|
||||
|
||||
### 自定义按钮颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
|
||||
通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色。
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
@ -73,7 +77,7 @@ Page({
|
||||
|
||||
### 朴素按钮
|
||||
|
||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
|
||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
### 基本用法
|
||||
|
||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容。
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
### 自定义列数
|
||||
|
||||
默认一行展示四个格子，可以通过`column-num`自定义列数
|
||||
默认一行展示四个格子，可以通过`column-num`自定义列数。
|
||||
|
||||
```html
|
||||
<van-grid column-num="3">
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过插槽可以自定义格子展示的内容
|
||||
通过插槽可以自定义格子展示的内容。
|
||||
|
||||
```html
|
||||
<van-grid column-num="3" border="{{ false }}">
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
### 正方形格子
|
||||
|
||||
设置`square`属性后，格子的高度会和宽度保持一致
|
||||
设置`square`属性后，格子的高度会和宽度保持一致。
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过`gutter`属性设置格子之间的距离
|
||||
通过`gutter`属性设置格子之间的距离。
|
||||
|
||||
```html
|
||||
<van-grid gutter="{{ 10 }}">
|
||||
@ -79,7 +79,7 @@
|
||||
|
||||
### 内容横排
|
||||
|
||||
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
|
||||
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列。
|
||||
|
||||
```html
|
||||
<van-grid direction="horizontal" column-num="2">
|
||||
@ -91,7 +91,7 @@
|
||||
|
||||
### 页面跳转
|
||||
|
||||
可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
|
||||
可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型。
|
||||
|
||||
```html
|
||||
<van-grid clickable column-num="2">
|
||||
@ -112,7 +112,7 @@
|
||||
|
||||
### 提示信息
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-grid column-num="2">
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
基于字体的图标集， 可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
|
||||
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接。
|
||||
|
||||
```html
|
||||
<van-icon name="close" />
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
### 提示信息
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-icon name="chat" dot />
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
### 图标颜色
|
||||
|
||||
设置`color`属性来控制图标颜色
|
||||
设置`color`属性来控制图标颜色。
|
||||
|
||||
```html
|
||||
<van-icon name="chat" color="red" />
|
||||
@ -45,7 +45,7 @@
|
||||
|
||||
### 图标大小
|
||||
|
||||
设置`size`属性来控制图标大小
|
||||
设置`size`属性来控制图标大小。
|
||||
|
||||
```html
|
||||
<van-icon name="chat" size="50px" />
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
### 开发者工具上提示 Faild to load font 是什么情况？
|
||||
|
||||
这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html)注意第 5 条
|
||||
这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html)注意第5条。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,13 +14,13 @@
|
||||
}
|
||||
```
|
||||
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)
|
||||
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)。
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础用法与原生 [image](<(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)>) 标签一致，可以设置`src`、`width`、`height`等原生属性
|
||||
基础用法与原生 [image](<(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)>) 标签一致，可以设置`src`、`width`、`height`等原生属性。
|
||||
|
||||
```html
|
||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
### 填充模式
|
||||
|
||||
通过`fit`属性可以设置图片填充模式，可选值见下方表格
|
||||
通过`fit`属性可以设置图片填充模式，可选值见下方表格。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
### 图片懒加载
|
||||
|
||||
图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
|
||||
图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
@ -67,7 +67,7 @@
|
||||
|
||||
### 加载中提示
|
||||
|
||||
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
|
||||
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容。
|
||||
|
||||
```html
|
||||
<van-image use-loading-slot>
|
||||
@ -77,7 +77,7 @@
|
||||
|
||||
### 加载失败提示
|
||||
|
||||
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
|
||||
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容。
|
||||
|
||||
```html
|
||||
<van-image use-error-slot>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# IndexBar 索引栏
|
||||
|
||||
### 介绍
|
||||
|
||||
用于列表的索引分类显示和快速定位。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -17,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
|
||||
点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置。
|
||||
|
||||
```html
|
||||
<van-index-bar>
|
||||
@ -41,7 +45,7 @@
|
||||
|
||||
### 自定义索引列表
|
||||
|
||||
可以通过`index-list`属性自定义展示的索引字符列表，
|
||||
可以通过`index-list`属性自定义展示的索引字符列表。
|
||||
|
||||
```html
|
||||
<van-index-bar index-list="{{ indexList }}">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Loading 加载
|
||||
|
||||
### 介绍
|
||||
|
||||
加载图标，用于表示加载中的过渡状态。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# NavBar 导航栏
|
||||
|
||||
### 介绍
|
||||
|
||||
为页面提供导航功能，常用于页面顶部。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -38,7 +42,7 @@ Page({
|
||||
|
||||
### 高级用法
|
||||
|
||||
通过 slot 定制内容
|
||||
通过 slot 定制内容。
|
||||
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# NoticeBar 通告栏
|
||||
# NoticeBar 通知栏
|
||||
|
||||
### 介绍
|
||||
|
||||
用于循环播放展示一组消息通知。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -75,7 +79,7 @@
|
||||
|
||||
### 自定义滚动速率
|
||||
|
||||
使用`speed`属性控制滚动速率
|
||||
使用`speed`属性控制滚动速率。
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
@ -91,7 +95,7 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` |
|
||||
| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
|
||||
| text | 通知文本内容 | _string_ | `''` |
|
||||
| color | 通知文本颜色 | _string_ | `#ed6a0c` |
|
||||
| background | 滚动条背景 | _string_ | `#fffbe8` |
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Notify 消息提示
|
||||
|
||||
### 介绍
|
||||
|
||||
在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -27,7 +31,7 @@ Notify('通知内容');
|
||||
|
||||
### 通知类型
|
||||
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`。
|
||||
|
||||
```js
|
||||
// 主要通知
|
||||
@ -45,7 +49,7 @@ Notify({ type: 'warning', message: '通知内容' });
|
||||
|
||||
### 自定义通知
|
||||
|
||||
自定义消息通知的颜色和展示时长
|
||||
自定义消息通知的颜色和展示时长。
|
||||
|
||||
```js
|
||||
Notify({
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
|
||||
创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -41,7 +41,7 @@ Page({
|
||||
|
||||
### 嵌入内容
|
||||
|
||||
通过默认插槽可以在遮罩层上嵌入任意内容
|
||||
通过默认插槽可以在遮罩层上嵌入任意内容。
|
||||
|
||||
```html
|
||||
<van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
```html
|
||||
<van-panel title="标题" desc="描述信息" status="状态">
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
### 高级用法
|
||||
|
||||
使用`slot`自定义内容
|
||||
使用`slot`自定义内容。
|
||||
|
||||
```html
|
||||
<van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
选择器组件通常与 [弹出层](#/popup) 组件配合使用
|
||||
提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 [弹出层](#/popup) 组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -39,7 +39,7 @@ Page({
|
||||
|
||||
### 默认选中项
|
||||
|
||||
单列选择器可以直接通过`default-index`属性设置初始选中项的索引值
|
||||
单列选择器可以直接通过`default-index`属性设置初始选中项的索引值。
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
@ -116,7 +116,7 @@ Page({
|
||||
|
||||
### 禁用选项
|
||||
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项。
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" />
|
||||
@ -136,7 +136,7 @@ Page({
|
||||
|
||||
### 加载状态
|
||||
|
||||
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
|
||||
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示。
|
||||
|
||||
```html
|
||||
<van-picker columns="{{ columns }}" loading />
|
||||
@ -162,7 +162,7 @@ Page({
|
||||
|
||||
### Events
|
||||
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
@ -172,7 +172,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
|
||||
### Columns 数据结构
|
||||
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`。
|
||||
|
||||
| key | 说明 |
|
||||
| ------------ | -------------------------- |
|
||||
@ -190,7 +190,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 picker 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 picker 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`show`属性控制弹出层是否展示
|
||||
通过`show`属性控制弹出层是否展示。
|
||||
|
||||
```html
|
||||
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
|
||||
@ -44,7 +44,7 @@ Page({
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`。
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
@ -57,7 +57,7 @@ Page({
|
||||
|
||||
### 关闭图标
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
@ -91,7 +91,7 @@ Page({
|
||||
|
||||
### 圆角弹窗
|
||||
|
||||
设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
|
||||
设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式。
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Progress 进度条
|
||||
|
||||
### 介绍
|
||||
|
||||
用于展示操作的当前进度。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,7 +18,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度。
|
||||
|
||||
```html
|
||||
<van-progress percentage="50" />
|
||||
@ -22,7 +26,7 @@
|
||||
|
||||
### 线条粗细
|
||||
|
||||
通过`stroke-width`可以设置进度条的粗细
|
||||
通过`stroke-width`可以设置进度条的粗细。
|
||||
|
||||
```html
|
||||
<van-progress :percentage="50" stroke-width="8" />
|
||||
@ -38,7 +42,7 @@
|
||||
|
||||
### 样式定制
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色。
|
||||
|
||||
```html
|
||||
<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Radio 单选框
|
||||
|
||||
### 介绍
|
||||
|
||||
在一组备选项中进行单选。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -15,7 +19,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`value`绑定值当前选中项的 name
|
||||
通过`value`绑定值当前选中项的 name 。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
@ -55,7 +59,7 @@ Page({
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" disabled bind:change="onChange">
|
||||
@ -66,7 +70,7 @@ Page({
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，单选框的形状会变成方形
|
||||
将`shape`属性设置为`square`，单选框的形状会变成方形。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
@ -77,7 +81,7 @@ Page({
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性设置选中状态的图标颜色
|
||||
通过`checked-color`属性设置选中状态的图标颜色。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
@ -88,7 +92,7 @@ Page({
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`icon-size`属性可以自定义图标的大小
|
||||
通过`icon-size`属性可以自定义图标的大小。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
@ -99,7 +103,7 @@ Page({
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性
|
||||
通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
@ -133,7 +137,7 @@ Page({
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
通过设置`label-disabled`属性可以禁用单选框文本点击
|
||||
通过设置`label-disabled`属性可以禁用单选框文本点击。
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Rate 评分
|
||||
|
||||
### 介绍
|
||||
|
||||
用于对事物进行评级操作。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Search 搜索
|
||||
|
||||
### 介绍
|
||||
|
||||
用于搜索场景的输入框组件。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -22,7 +26,7 @@
|
||||
|
||||
### 事件监听
|
||||
|
||||
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
|
||||
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -36,7 +40,7 @@
|
||||
|
||||
### 搜索框内容对齐
|
||||
|
||||
通过 `input-align` 属性可以设置搜索框内容的对齐方式
|
||||
通过 `input-align` 属性可以设置搜索框内容的对齐方式。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -48,7 +52,7 @@
|
||||
|
||||
### 禁用搜索框
|
||||
|
||||
通过 `disabled` 属性可以将组件设置为禁用状态
|
||||
通过 `disabled` 属性可以将组件设置为禁用状态。
|
||||
|
||||
```html
|
||||
<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />
|
||||
@ -56,7 +60,7 @@
|
||||
|
||||
### 自定义背景色
|
||||
|
||||
通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`
|
||||
通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Sidebar 侧边导航
|
||||
|
||||
### 介绍
|
||||
|
||||
垂直展示的导航栏，用于在不同的内容区域之间进行切换。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -17,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过在`van-sidebar`上设置`activeKey`属性来控制选中项
|
||||
通过在`van-sidebar`上设置`activeKey`属性来控制选中项。
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
@ -37,7 +41,7 @@ Page({
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标
|
||||
设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
@ -49,7 +53,7 @@ Page({
|
||||
|
||||
### 禁用选项
|
||||
|
||||
通过`disabled`属性禁用选项
|
||||
通过`disabled`属性禁用选项。
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}">
|
||||
@ -61,7 +65,7 @@ Page({
|
||||
|
||||
### 监听切换事件
|
||||
|
||||
设置`change`方法来监听切换导航项时的事件
|
||||
设置`change`方法来监听切换导航项时的事件。
|
||||
|
||||
```html
|
||||
<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Skeleton 骨架屏
|
||||
|
||||
### 介绍
|
||||
|
||||
用于在内容加载过程中展示一组占位图形。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -16,7 +20,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数
|
||||
通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数。
|
||||
|
||||
```html
|
||||
<van-skeleton title row="3" />
|
||||
@ -24,7 +28,7 @@
|
||||
|
||||
### 显示头像
|
||||
|
||||
通过`avatar`属性显示头像占位图
|
||||
通过`avatar`属性显示头像占位图。
|
||||
|
||||
```html
|
||||
<van-skeleton title avatar row="3" />
|
||||
@ -32,7 +36,7 @@
|
||||
|
||||
### 展示子组件
|
||||
|
||||
将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件
|
||||
将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件。
|
||||
|
||||
```html
|
||||
<van-skeleton title avatar row="3" loading="{{ loading }}">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Slider 滑块
|
||||
|
||||
### 介绍
|
||||
|
||||
滑动输入条，用于在给定的范围内选择一个值。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字
|
||||
步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`value`设置输入值，可以通过`change`事件监听到输入值的变化
|
||||
通过`value`设置输入值，可以通过`change`事件监听到输入值的变化。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" bind:change="onChange" />
|
||||
@ -34,7 +34,7 @@ Page({
|
||||
|
||||
### 步长设置
|
||||
|
||||
通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`
|
||||
通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" step="2" />
|
||||
@ -42,7 +42,7 @@ Page({
|
||||
|
||||
### 限制输入范围
|
||||
|
||||
通过`min`和`max`属性限制输入值的范围
|
||||
通过`min`和`max`属性限制输入值的范围。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 5 }}" min="5" max="8" />
|
||||
@ -50,7 +50,7 @@ Page({
|
||||
|
||||
### 限制输入整数
|
||||
|
||||
设置`integer`属性后，输入框将限制只能输入整数
|
||||
设置`integer`属性后，输入框将限制只能输入整数。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" integer />
|
||||
@ -58,7 +58,7 @@ Page({
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框
|
||||
通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" disabled />
|
||||
@ -66,7 +66,7 @@ Page({
|
||||
|
||||
### 关闭长按
|
||||
|
||||
通过设置`long-press`属性决定步进器是否开启长按手势
|
||||
通过设置`long-press`属性决定步进器是否开启长按手势。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" long-press="{{ false }}" />
|
||||
@ -74,7 +74,7 @@ Page({
|
||||
|
||||
### 固定小数位数
|
||||
|
||||
通过设置`decimal-length`属性可以保留固定的小数位数
|
||||
通过设置`decimal-length`属性可以保留固定的小数位数。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
|
||||
@ -82,7 +82,7 @@ Page({
|
||||
|
||||
### 异步变更
|
||||
|
||||
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
|
||||
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ value }}" async-change bind:change="onChange" />
|
||||
@ -107,7 +107,7 @@ Page({
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
|
||||
通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度。
|
||||
|
||||
```html
|
||||
<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Steps 步骤条
|
||||
|
||||
### 介绍
|
||||
|
||||
用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -45,7 +49,7 @@ Page({
|
||||
|
||||
### 自定义样式
|
||||
|
||||
可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色
|
||||
可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色。
|
||||
|
||||
```html
|
||||
<van-steps
|
||||
@ -58,7 +62,7 @@ Page({
|
||||
|
||||
### 自定义图标
|
||||
|
||||
可以通过 `inactiveIcon` 和 `activeIcon` 属性分别设置每一项的图标
|
||||
可以通过 `inactiveIcon` 和 `activeIcon` 属性分别设置每一项的图标。
|
||||
|
||||
```html
|
||||
<van-steps steps="{{ steps }}" active="{{ active }}" />
|
||||
@ -99,7 +103,7 @@ Page({
|
||||
|
||||
### 竖向步骤条
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式。
|
||||
|
||||
```html
|
||||
<van-steps
|
||||
|
||||
@ -6,7 +6,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -20,7 +20,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
|
||||
### 基础用法
|
||||
|
||||
将内容包裹在`Sticky`组件内即可
|
||||
将内容包裹在`Sticky`组件内即可。
|
||||
|
||||
```html
|
||||
<van-sticky>
|
||||
@ -30,7 +30,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
|
||||
### 吸顶距离
|
||||
|
||||
通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
|
||||
通过`offset-top`属性可以设置组件在吸顶时与顶部的距离。
|
||||
|
||||
```html
|
||||
<van-sticky offset-top="{{ 50 }}">
|
||||
@ -40,7 +40,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
|
||||
### 指定容器
|
||||
|
||||
通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置
|
||||
通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。
|
||||
|
||||
```html
|
||||
<view id="container" style="height: 150px;">
|
||||
@ -68,7 +68,7 @@ Page({
|
||||
|
||||
### 嵌套在 scroll-view 内使用
|
||||
|
||||
通过 `scroll-top` 与 `offset-top` 属性可以实现在 scroll-view 内嵌套使用
|
||||
通过 `scroll-top` 与 `offset-top` 属性可以实现在 scroll-view 内嵌套使用。
|
||||
|
||||
```html
|
||||
<scroll-view
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# SubmitBar 提交订单栏
|
||||
|
||||
### 介绍
|
||||
|
||||
用于展示订单金额与提交订单。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -24,7 +28,7 @@
|
||||
|
||||
### 禁用状态
|
||||
|
||||
禁用状态下不会触发`submit`事件
|
||||
禁用状态下不会触发`submit`事件。
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
@ -39,7 +43,7 @@
|
||||
|
||||
### 加载状态
|
||||
|
||||
加载状态下不会触发`submit`事件
|
||||
加载状态下不会触发`submit`事件。
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
@ -52,7 +56,7 @@
|
||||
|
||||
### 高级用法
|
||||
|
||||
通过插槽插入自定义内容
|
||||
通过插槽插入自定义内容。
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# SwipeCell 滑动单元格
|
||||
|
||||
### 介绍
|
||||
|
||||
可以左右滑动来展示操作按钮的单元格组件。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -26,7 +30,7 @@
|
||||
|
||||
### 异步关闭
|
||||
|
||||
当开启`async-close`时， 通过绑定`close`事件，可以自定义两侧滑动内容点击时的关闭行为
|
||||
当开启`async-close`时， 通过绑定`close`事件，可以自定义两侧滑动内容点击时的关闭行为。
|
||||
|
||||
```html
|
||||
<van-swipe-cell
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Switch 开关
|
||||
|
||||
### 介绍
|
||||
|
||||
用于在打开和关闭状态之间进行切换。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Tab 标签页
|
||||
|
||||
### 介绍
|
||||
|
||||
选项卡组件，用于在不同的内容区域之间进行切换。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -15,7 +19,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`active`设定当前激活标签对应的索引值，默认情况下启用第一个标签
|
||||
通过`active`设定当前激活标签对应的索引值，默认情况下启用第一个标签。
|
||||
|
||||
```html
|
||||
<van-tabs active="{{ active }}" bind:change="onChange">
|
||||
@ -43,7 +47,7 @@ Page({
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`active`的值为当前标签的`name`（此时无法通过索引值来匹配标签）
|
||||
在标签指定`name`属性的情况下，`active`的值为当前标签的`name`（此时无法通过索引值来匹配标签）。
|
||||
|
||||
```html
|
||||
<van-tabs active="a">
|
||||
@ -55,7 +59,7 @@ Page({
|
||||
|
||||
### 横向滚动
|
||||
|
||||
多于 5 个标签时，Tab 可以横向滚动
|
||||
多于 5 个标签时，Tab 可以横向滚动。
|
||||
|
||||
```html
|
||||
<van-tabs active="{{ active }}">
|
||||
@ -70,7 +74,7 @@ Page({
|
||||
|
||||
### 禁用标签
|
||||
|
||||
设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在`van-tabs`上监听`disabled`事件
|
||||
设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在`van-tabs`上监听`disabled`事件。
|
||||
|
||||
```html
|
||||
<van-tabs bind:disabled="onClickDisabled">
|
||||
@ -93,7 +97,7 @@ Page({
|
||||
|
||||
### 样式风格
|
||||
|
||||
`Tab`支持两种样式风格：`line`和`card`，默认为`line`样式，可以通过`type`属性修改样式风格
|
||||
`Tab`支持两种样式风格：`line`和`card`，默认为`line`样式，可以通过`type`属性修改样式风格。
|
||||
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
@ -105,7 +109,7 @@ Page({
|
||||
|
||||
### 点击事件
|
||||
|
||||
可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和标识符
|
||||
可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和标识符。
|
||||
|
||||
```html
|
||||
<van-tabs bind:click="onClick">
|
||||
@ -127,7 +131,7 @@ Page({
|
||||
|
||||
### 粘性布局
|
||||
|
||||
通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
|
||||
通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。
|
||||
|
||||
```html
|
||||
<van-tabs sticky>
|
||||
@ -153,7 +157,7 @@ Page({
|
||||
|
||||
### 滑动切换
|
||||
|
||||
通过`swipeable`属性可以开启滑动切换标签页
|
||||
通过`swipeable`属性可以开启滑动切换标签页。
|
||||
|
||||
```html
|
||||
<van-tabs swipeable>
|
||||
@ -189,13 +193,13 @@ Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位
|
||||
|
||||
#### 解决方法
|
||||
|
||||
方法一，使用 `wx:if` 来控制组件展示，使组件重新初始化：
|
||||
方法一，使用 `wx:if` 来控制组件展示，使组件重新初始化。
|
||||
|
||||
```html
|
||||
<van-tabs wx:if="show" />
|
||||
```
|
||||
|
||||
方法二，调用组件的 resize 方法来主动触发重绘：
|
||||
方法二，调用组件的 resize 方法来主动触发重绘。
|
||||
|
||||
```html
|
||||
<van-tabs id="tabs" />
|
||||
@ -273,7 +277,7 @@ this.selectComponent('#tabs').resize();
|
||||
|
||||
### 方法
|
||||
|
||||
通过 selectComponent 可以获取到 Tabs 实例并调用实例方法
|
||||
通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Tabbar 标签栏
|
||||
|
||||
### 介绍
|
||||
|
||||
底部导航栏，用于在不同页面之间进行切换。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -38,7 +42,7 @@ Page({
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`
|
||||
在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`。
|
||||
|
||||
```html
|
||||
<van-tabbar active="{{ active }}" bind:change="onChange">
|
||||
@ -73,7 +77,7 @@ Page({
|
||||
|
||||
### 自定义图标
|
||||
|
||||
可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标
|
||||
可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。
|
||||
|
||||
```html
|
||||
<van-tabbar active="{{ active }}" bind:change="onChange">
|
||||
@ -166,7 +170,7 @@ Page({
|
||||
|
||||
### 结合自定义 tabBar
|
||||
|
||||
请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/vaXgTsmQ7hnm)
|
||||
请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/vaXgTsmQ7hnm)。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Tag 标签
|
||||
|
||||
### 介绍
|
||||
|
||||
用于标记关键词和概括主要内容。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Toast 轻提示
|
||||
|
||||
### 介绍
|
||||
|
||||
在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Transition 动画
|
||||
|
||||
### 介绍
|
||||
|
||||
使元素从一种样式逐渐变化为另一种样式的效果。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -14,7 +18,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画
|
||||
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
|
||||
|
||||
```html
|
||||
<van-transition show="{{ show }}" custom-class="block">
|
||||
@ -24,7 +28,7 @@
|
||||
|
||||
### 动画类型
|
||||
|
||||
transition 组件内置了多种动画，可以通过`name`字段指定动画类型
|
||||
transition 组件内置了多种动画，可以通过`name`字段指定动画类型。
|
||||
|
||||
```html
|
||||
<van-transition name="fade-up" />
|
||||
@ -32,7 +36,7 @@ transition 组件内置了多种动画，可以通过`name`字段指定动画类
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间：
|
||||
可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。
|
||||
|
||||
```html
|
||||
<van-transition
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# TreeSelect 分类选择
|
||||
|
||||
### 介绍
|
||||
|
||||
用于从一组相关联的数据集合中进行选择。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -132,9 +136,7 @@ Page({
|
||||
|
||||
### items 数据结构
|
||||
|
||||
`items` 整体为一个数组，数组内包含一系列描述分类的对象
|
||||
|
||||
每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项
|
||||
`items` 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。
|
||||
|
||||
```javascript
|
||||
[
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Uploader 文件上传
|
||||
|
||||
### 介绍
|
||||
|
||||
用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
@ -16,7 +20,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
文件上传完毕后会触发`after-read`回调函数，获取到对应的文件的临时地址，然后再使用`wx.uploadFile`将图片上传到远程服务器上
|
||||
文件上传完毕后会触发`after-read`回调函数，获取到对应的文件的临时地址，然后再使用`wx.uploadFile`将图片上传到远程服务器上。
|
||||
|
||||
```html
|
||||
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
|
||||
@ -104,7 +108,7 @@ Page({
|
||||
|
||||
### 上传状态
|
||||
|
||||
通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成
|
||||
通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成。
|
||||
|
||||
```html
|
||||
<van-uploader file-list="{{ fileList }}" />
|
||||
@ -131,7 +135,7 @@ Page({
|
||||
|
||||
### 限制上传数量
|
||||
|
||||
通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
|
||||
通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
|
||||
|
||||
```html
|
||||
<van-uploader
|
||||
@ -143,7 +147,7 @@ Page({
|
||||
|
||||
### 自定义上传样式
|
||||
|
||||
通过插槽可以自定义上传区域的样式
|
||||
通过插槽可以自定义上传区域的样式。
|
||||
|
||||
```html
|
||||
<van-uploader>
|
||||
@ -186,7 +190,7 @@ Page({
|
||||
|
||||
```js
|
||||
// 上传图片
|
||||
uploadToCloud() {
|
||||
uploadToCloud() {
|
||||
wx.cloud.init();
|
||||
const { fileList } = this.data;
|
||||
if (!fileList.length) {
|
||||
@ -253,7 +257,7 @@ uploadFilePromise(fileName, chooseResult) {
|
||||
|
||||
### FileList
|
||||
|
||||
`file-list` 为一个对象数组，数组中的每一个对象包含以下 `key`
|
||||
`file-list` 为一个对象数组，数组中的每一个对象包含以下 `key`。
|
||||
|
||||
| 参数 | 说明 |
|
||||
| --------- | ------------------------------------------------------ |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user