diff --git a/assets/iframe-router.14cf2753.js b/assets/iframe-router.14cf2753.js deleted file mode 100644 index 6b5dad02..00000000 --- a/assets/iframe-router.14cf2753.js +++ /dev/null @@ -1 +0,0 @@ -import{o as s,a,u as t}from"./vue-libs.7d12dd47.js";!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();var n=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const l={class:"van-doc-markdown-body"},e=t('
2022-01-04
Bug Fixes
Document
Feature
2021-12-21
Bug Fixes
Document
Feature
2021-09-29
Bug Fixes
Document
Feature
2021-09-27
Bug Fixes
Document
Feature
Performance
2021-08-30
Bug Fixes
Features
Performance Improvements
2021-07-04
Bug Fixes
weapp-qrcode
wechat-moments
#4256Features
Improvements
2021-05-22
Bug Fixes
Features
2021-01-21
Features
Bug Fixes
Improvements
2021-01-19
Features
Bug Fixes
Improvements
2020-12-18
Improvements
Bug Fixes
2020-12-09
Features
beforeClose
属性 (#3815)county_list
数据 (#3824)resize
方法 (#3827)Improvements
Bug Fixes
2020-11-29
Features
placeholder
icon-prefix
属性 (#3792)Bug Fixes
type=year-month
时选择出现报错 (#3783)ellipsis
为 false
时下划线位置不正确 (#3777)Improvements
2020-11-11
Features
custom-class
#3678Bug Fixes
2020-10-15
Features
Bug Fixes
2020-09-29
Features
origin-price
tag
插槽 #3645Bug Fixes
2020-08-27
Features
Bug Fixes
2020-07-17
Features
Bug Fixes
2020-06-24
Features
Bug Fixes
2020-05-08
1.3.0 中,我们为数个表单组件支持了简易双向绑定,涉及组件有
Slider #3107
Search #3106
Rate #3105
Features
Bug Fixes
2020-04-21
Features
Bug Fixes
2020-04-04
Features
Bug Fixes
2020-03-21
Features
Bug Fixes
2020-03-04
Features
popupStyle
属性 #2804open
close
opened
closed
事件 #2804price
num
插槽 #2787origin-price-class
外部样式类 #2787Bug Fixes
2020-02-07
Features
disabled
时的组件样式 #2720Bug Fixes
2020-01-21
Features
Bug Fixes
2019-12-31
Features
row-class``avatar-class``title-class
#2612width
属性 #2607camera``compressed``maxDuration
属性 #2584Improvements
Bug Fixes
2019-12-23
Features
Improvements
Bug Fixes
2019-12-11
CSS自定义属性
自定义样式env()
重构 iOS 安全区域适配在 Vant Weapp 1.0 版本中,我们新增了 11 个实用的基础组件:
position: sticky
属性实现的效果类似在 1.0 迭代计划确定之初,我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢?
微信小程序的环境是非常特殊的。不具有动态加载代码的机制,同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿,不再适合微信小程序的环境。
微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM,幸运的是,小程序也支持了 CSS 自定义属性 的特性。最终,我们基于 CSS 自定义属性设计了样式定制的方案,开发者使用灵活、方便,组件维护也更简单。
从 1.0 版本开始,Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制,具体使用姿势可查看相关文档
1.0 版本中包含少量不兼容更新,主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目,请按照下方的列表依次检查,大部分项目可以无痛升级。
BadgeGroup
重命名为Sidebar
Badge
重命名为SlidebarItem
active
属性重命名为activeKey
text
选项重命名为message
backgroundColor
选项重命名为background
transitionend
事件,新增 6 个事件SwitchCell
组件,可以使用Cell
和Switch
组件代替transitionend
事件,新增 6 个事件click-overlay
事件close-on-click-action
属性color
属性description
属性round
属性columns-placeholder
属性reset
方法支持传入code
参数loading-type
属性color
属性支持渐变色disabled
时增加过渡效果icon-size
属性#ee0a24
filter
属性title
插槽confirm-button-color
属性cancel-button-color
属性width
属性overlay-style
属性clickable
属性arrow-direction
属性hold-keyboard
属性color
属性icon
插槽dot
属性info
属性dot
属性dot
属性down
图标wap-hone
实底风格图标number
类型的size
属性number
类型的size
属性clear
方法round
属性closeable
属性close-icon
属性close-icon-position
属性stroke-width
属性icon-size
属性gutter
属性touchable
属性string
类型的size
属性action-text
属性left-icon
插槽right-icon
插槽dot
属性drag-start
事件drag-end
事件max
和min
属性number
类型的bar-height
属性name
属性open
事件input-width
属性button-size
属性decimalLength
属性active-icon
属性inactive-icon
属性name
属性line-height
属性ellipsis
属性lazy-render
属性line-width
属性支持String
类型max
属性content
插槽Vant Weapp 基于微信小程序的机制,为开发者提供了以下 3 种修改组件样式的方法
样式隔离的相关背景知识请查阅微信小程序文档
Vant Weapp 的所有组件都开启了addGlobalClass: true
以接受外部样式的影响,可以使用如下 2 种方式覆盖组件样式
在页面中使用 Vant Weapp 组件时,可直接在页面的样式文件中覆盖样式
<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n font-size: 20px;\n background-color: pink;\n}\n
在自定义组件中使用 Vant Weapp 组件时,需开启
styleIsolation: 'shared'
选项
<van-button type="primary">主要按钮</van-button>\n
Component({\n options: {\n styleIsolation: 'shared',\n },\n});\n
.van-button--primary {\n font-size: 20px;\n background-color: pink;\n}\n
外部样式类的相关知识背景请查阅微信小程序文档
Vant Weapp 开放了大量的外部样式类供开发者使用,具体的样式类名称可查阅对应组件的“外部样式类”部分。
需要注意的是普通样式类和外部样式类的优先级是未定义的,因此使用时请添加!important
以保证外部样式类的优先级。
<van-cell\n title="单元格"\n value="内容"\n title-class="cell-title"\n value-class="cell-value"\n/>\n
.cell-title {\n color: pink !important;\n font-size: 20px !important;\n}\n\n.cell-value {\n color: green !important;\n font-size: 12px !important;\n}\n
Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。
相较于 解除样式隔离 和 使用外部样式类,这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。
当然,用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题
轻量、可靠的小程序 UI 组件库
Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。
扫描下方小程序二维码,体验组件库示例:
请参考 快速上手。
以下是 Vant 和 Vant Weapp 的核心贡献者们:
chenjiahan | cookfront | wangnaiyi | pangxie | rex-zsd | nemo-shen | Lindysen | JakeLaoyu |
本项目基于 MIT 协议,请自由地享受和参与开源。
使用 npm 构建前,请先阅读微信官方的 npm 支持
# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
开发者工具创建的项目,miniprogramRoot
默认为 miniprogram
,package.json
在其外部,npm 构建无法正常工作。
需要手动在 project.config.json
内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{\n ...\n "setting": {\n ...\n "packNpmManually": true,\n "packNpmRelationList": [\n {\n "packageJsonPath": "./package.json",\n "miniprogramNpmDistDir": "./miniprogram/"\n }\n ]\n }\n}\n
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。
# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n
请将path/to/node_modules/@vant/weapp
修改为项目的 node_modules
中 @vant/weapp 所在的目录。
{\n ...\n "compilerOptions": {\n ...\n "baseUrl": ".",\n "types": ["miniprogram-api-typings"],\n "paths": {\n "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]\n },\n "lib": ["ES6"]\n }\n}\n
以 Button 组件为例,只需要在app.json
或index.json
中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。
// 通过 npm 安装\n// app.json\n"usingComponents": {\n "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>\n
\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n
接着打开微信开发者工具,导入example
目录的项目就可以预览示例了。
@vant/weapp 部分组件使用了微信提供的接口,其中部分接口涉及获取用户隐私信息。
例如 <Uploader />
使用了微信提供的选择用户相册中图片接口(wx.chooseImage)
。
当小程序引入 @vant/weapp 并发布时, 根据微信《用户隐私保护指引填写说明》, 如检测到代码中存在涉及用户隐私信息接口则需填写用户隐私保护指引信息,如已填写则无需重复填写。
小程序基于 Shadow DOM 来实现自定义组件,所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。
CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。
定制使用的 CSS 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 配置文件。
// Component Colors\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f8f8f8;\n@background-color-light: #fafafa;\n
在 wxss 中为组件设置 CSS 变量
<van-button class="my-button">\n 默认按钮\n</van-button>\n
.my-button {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n}\n
或通过 style 属性来设置 CSS 变量,这使你能够轻松实现主题的动态切换
<van-button style="{{ buttonStyle }}">\n 默认按钮\n</van-button>\n
Page({\n data: {\n buttonStyle: `\n --button-border-radius: 10px;\n --button-default-color: green;\n `,\n },\n\n onLoad() {\n setTimeout(() => {\n this.setData({\n buttonStyle: `\n --button-border-radius: 2px;\n --button-default-color: pink;\n `,\n });\n }, 2000);\n },\n});\n
与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 CSS 变量 设置在 container 节点上
<view class="container">\n <van-button bind:click="onClick">\n 默认按钮\n </van-button>\n\n <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n onClick() {\n Toast('我是提示文案,建议不超过十五字~');\n },\n});\n
.container {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
在 app.wxss 中,写入 CSS 变量,即可对全局生效
page {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
底部弹起的模态面板,包含与当前情境相关的多个选项。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-action-sheet": "@vant/weapp/action-sheet/index"\n}\n
需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
<van-action-sheet\n show="{{ show }}"\n actions="{{ actions }}"\n bind:close="onClose"\n bind:select="onSelect"\n/>\n
Page({\n data: {\n show: false,\n actions: [\n {\n name: '选项',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ],\n },\n\n onClose() {\n this.setData({ show: false });\n },\n\n onSelect(event) {\n console.log(event.detail);\n },\n});\n
选项可以设置为加载状态或禁用状态。
<van-action-sheet\n show="{{ show }}"\n actions="{{ actions }}"\n cancel-text="取消"\n/>\n
Page({\n data: {\n show: false,\n actions: [\n { name: '着色选项', color: '#ee0a24' },\n { loading: true },\n { name: '禁用选项', disabled: true },\n ],\n },\n});\n
设置cancel-text
属性后,会在底部展示取消按钮,点击后关闭当前菜单。
<van-action-sheet\n show="{{ show }}"\n actions="{{ actions }}"\n cancel-text="取消"\n/>\n
设置description
属性后,会在选项上方显示描述信息。
<van-action-sheet\n show="{{ show }}"\n actions="{{ actions }}"\n description="这是一段描述信息"\n/>\n
通过设置title
属性展示标题栏,同时可以使用插槽自定义菜单内容。
<van-action-sheet show="{{ show }}" title="标题">\n <view>内容</view>\n</van-action-sheet>\n
需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
<van-action-sheet\n show="{{ show }}"\n actions="{{ actions }}"\n bind:close="onClose"\n bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n data: {\n show: false,\n actions: [\n { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n ],\n },\n\n onClose() {\n this.setData({ show: false });\n },\n\n onGetUserInfo(e) {\n console.log(e.detail);\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示动作面板 | boolean | - |
actions | 菜单选项 | Array | [] |
title | 标题 | string | - |
description v1.0.0 | 选项上方的描述信息 | string | - |
z-index | z-index 层级 | number | 100 |
cancel-text | 取消按钮文字 | string | - |
overlay | 是否显示遮罩层 | boolean | - |
round v1.0.0 | 是否显示圆角 | boolean | true |
close-on-click-action | 是否在点击选项后关闭 | boolean | true |
close-on-click-overlay | 点击遮罩是否关闭菜单 | boolean | - |
safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
事件名 | 说明 | 参数 |
---|---|---|
bind:select | 选中选项时触发,禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
bind:close | 关闭时触发 | - |
bind:cancel | 取消按钮点击时触发 | - |
bind:click-overlay | 点击遮罩层时触发 | - |
bind:getuserinfo | 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo 返回的一致,openType="getUserInfo"时有效 | - |
bind:contact | 客服消息回调,openType="contact"时有效 | - |
bind:getphonenumber | 获取用户手机号回调,openType="getPhoneNumber"时有效 | - |
bind:error | 当使用开放能力时,发生错误的回调,openType="launchApp"时有效 | - |
bind:launchapp | 打开 APP 成功的回调,openType="launchApp"时有效 | - |
bind:opensetting | 在打开授权设置页后回调,openType="openSetting"时有效 | - |
API
中的actions
为一个对象数组,数组中的每一个对象配置每一列,每一列有以下key
:
键名 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标题 | string | - |
subname | 二级标题 | string | - |
color | 选项文字颜色 | string | - |
loading | 是否为加载状态 | boolean | - |
disabled | 是否为禁用状态 | boolean | - |
className | 为对应列添加额外的 class 类名 | string | - |
openType | 微信开放能力,具体支持可参考 微信官方文档 | string | - |
lang | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 | string | en |
sessionFrom | 会话来源,openType="contact"时有效 | string | - |
sendMessageTitle | 会话内消息卡片标题,openType="contact"时有效 | string | 当前标题 |
sendMessagePath | 会话内消息卡片点击跳转小程序路径,openType="contact"时有效 | string | 当前分享路径 |
sendMessageImg | 会话内消息卡片图片,openType="contact"时有效 | string | 截图 |
showMessageCard | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效 | string | false |
appParameter | 打开 APP 时,向 APP 传递的参数,openType=launchApp 时有效 | string | - |
省市区选择组件通常与 弹出层 组件配合使用。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-area": "@vant/weapp/area/index"\n}\n
初始化省市区组件时,需要通过 area-list
属性传入省市区数据。
<van-area area-list="{{ areaList }}" />\n
areaList 为对象结构,包含 province_list
、city_list
、county_list
三个 key。
每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11
,以 0 补足 6 位,为 110000
。
示例数据如下:
const areaList = {\n province_list: {\n 110000: '北京市',\n 120000: '天津市',\n },\n city_list: {\n 110100: '北京市',\n 120100: '天津市',\n },\n county_list: {\n 110101: '东城区',\n 110102: '西城区',\n // ....\n },\n};\n
Vant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。
yarn add @vant/area-data\n
import { areaList } from '@vant/area-data';\n\nPage({\n data: {\n areaList,\n },\n});\n
如果想选中某个省市区,需要传入一个value
属性,绑定对应的省市区code
。
<van-area area-list="{{ areaList }}" value="110101" />\n
可以通过columns-num
属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为2
,则只会显示省市选择。
<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n
可以通过columns-placeholder
属性配置每一列的占位提示文字。
<van-area\n area-list="{{ areaList }}"\n columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n title="标题"\n/>\n
实际项目中,可以通过小程序云开发的能力,将省市区数据保存在云开发的数据库中,并在小程序中使用云开发的接口异步获取数据。
在小程序中使用云能力之前需要先调用wx.could.init
方法完成云能力的初始化。
const db = wx.cloud.database();\n\ndb.collection('region')\n .limit(1)\n .get()\n .then((res) => {\n if (res.data && res.data.length > 0) {\n this.setData({\n areaList: res.data[0],\n });\n }\n })\n .catch((err) => {\n console.log(err);\n });\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前选中的省市区code | string | - |
title | 顶部栏标题 | string | - |
area-list | 省市区数据,格式见下方 | object | - |
columns-num | 省市区显示列数,3-省市区,2-省市,1-省 | string | number | 3 |
columns-placeholder | 列占位提示文字 | string[] | [] |
loading | 是否显示加载状态 | boolean | false |
item-height | 选项高度 | number | 44 |
visible-item-count | 可见的选项个数 | number | 6 |
confirm-button-text | 确认按钮文字 | string | 确认 |
cancel-button-text | 取消按钮文字 | string | 取消 |
事件 | 说明 | 回调参数 |
---|---|---|
bind:confirm | 点击右上方完成按钮 | 一个数组参数,具体格式看下方数据格式章节 |
bind:cancel | 点击取消按钮时 | - |
bind:change | 选项改变时触发 | Picker 实例,所有列选中值,当前列对应的索引 |
通过 selectComponent 可以获取到 Area 实例并调用实例方法。
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
reset | code: string | - | 根据 code 重置所有选项,若不传 code,则重置到第一项 |
返回的数据整体为一个 Object,包含 values
, indexs
两个 key。
values
整体为一个数组,数组内包含 columnsNum
个数据, 每个数据对应一列选项中被选中的数据。
code
代表被选中的地区编码, name
代表被选中的地区名称。
[\n {\n code: '110000',\n name: '北京市',\n },\n {\n code: '110100',\n name: '北京市',\n },\n {\n code: '110101',\n name: '东城区',\n },\n];\n
indexs
为一个数组,数组内包含 columnsNum
个数据, 每个数据对应一列选项中被选中项的序号。
按钮用于触发一个操作,如提交表单。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-button": "@vant/weapp/button/index"\n}\n
支持default
、primary
、info
、warning
、danger
五种类型,默认为default
。
<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n
通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n
设置hairline
属性可以开启 0.5px 边框,基于伪类实现。
<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n
通过disabled
属性来禁用按钮,此时按钮的bind:click
事件不会触发。
<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n
<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n
<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n
通过icon
属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。
<van-button icon="star-o" type="primary" />\n<van-button icon="star-o" type="primary">按钮</van-button>\n<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">\n 按钮\n</van-button>\n
支持large
、normal
、small
、mini
四种尺寸,默认为normal
。
<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n
通过block
属性可以将按钮的元素类型设置为块级元素。
<van-button type="primary" block>块级元素</van-button>\n
通过color
属性可以自定义按钮的颜色。
<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n 渐变色按钮\n</van-button>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 标识符 | string | - |
type | 按钮类型,可选值为 primary info warning danger | string | default |
size | 按钮尺寸,可选值为 normal large small mini | string | normal |
color v1.0.0 | 按钮颜色,支持传入linear-gradient 渐变色 | string | - |
icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | string | - |
class-prefix | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | van-icon |
plain | 是否为朴素按钮 | boolean | false |
block | 是否为块级元素 | boolean | false |
round | 是否为圆形按钮 | boolean | false |
square | 是否为方形按钮 | boolean | false |
disabled | 是否禁用按钮 | boolean | false |
hairline | 是否使用 0.5px 边框 | boolean | false |
loading | 是否显示为加载状态 | boolean | false |
loading-text | 加载状态提示文字 | string | - |
loading-type | 加载状态图标类型,可选值为 spinner | string | circular |
loading-size | 加载图标大小 | string | 20px |
custom-style | 自定义样式 | string | - |
open-type | 微信开放能力,具体支持可参考 微信官方文档 | string | - |
app-parameter | 打开 APP 时,向 APP 传递的参数 | string | - |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en |
session-from | 会话来源 | string | - |
business-id | 客服消息子商户 id | number | - |
send-message-title | 会话内消息卡片标题 | string | 当前标题 |
send-message-path | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 |
send-message-img | sendMessageImg | string | 截图 |
show-message-card | 显示会话内消息卡片 | string | false |
dataset | 按钮 dataset,open-type 为 share 时,可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值 | any | - |
form-type | 用于 form 组件,可选值为submit reset ,点击分别会触发 form 组件的 submit/reset 事件 | string | - |
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击按钮,且按钮状态不为加载或禁用时触发 | - |
bind:getuserinfo | 用户点击该按钮时,会返回获取到的用户信息, 从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
bind:contact | 客服消息回调 | - |
bind:getphonenumber | 获取用户手机号回调 | - |
bind:error | 当使用开放能力时,发生错误的回调 | - |
bind:opensetting | 在打开授权设置页后回调 | - |
Button 提供的是 click 事件而不是原生 tap 事件,按钮禁用时,click 事件不会触发,tap 事件依然会触发。
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
loading-class | 加载图标样式类 |
日历组件用于选择日期或日期区间。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-calendar": "@vant/weapp/calendar/index"\n}\n
下面演示了结合单元格来使用日历组件的用法,日期选择完成后会触发confirm
事件。
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n data: {\n date: '',\n show: false,\n },\n\n onDisplay() {\n this.setData({ show: true });\n },\n onClose() {\n this.setData({ show: false });\n },\n formatDate(date) {\n date = new Date(date);\n return `${date.getMonth() + 1}/${date.getDate()}`;\n },\n onConfirm(event) {\n this.setData({\n show: false,\n date: this.formatDate(event.detail),\n });\n },\n});\n
设置type
为multiple
后可以选择多个日期,此时confirm
事件返回的 date 为数组结构,数组包含若干个选中的日期。
<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n show="{{ show }}"\n type="multiple"\n bind:close="onClose"\n bind:confirm="onConfirm"\n/>\n
Page({\n data: {\n text: '',\n show: false,\n },\n\n onDisplay() {\n this.setData({ show: true });\n },\n onClose() {\n this.setData({ show: false });\n },\n onConfirm(event) {\n this.setData({\n show: false,\n date: `选择了 ${event.detail.length} 个日期`,\n });\n },\n});\n
设置type
为range
后可以选择日期区间,此时confirm
事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。
<van-cell title="选择日期区间" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar\n show="{{ show }}"\n type="range"\n bind:close="onClose"\n bind:confirm="onConfirm"\n/>\n
Page({\n data: {\n date: '',\n show: false,\n },\n\n onDisplay() {\n this.setData({ show: true });\n },\n onClose() {\n this.setData({ show: false });\n },\n formatDate(date) {\n date = new Date(date);\n return `${date.getMonth() + 1}/${date.getDate()}`;\n },\n onConfirm(event) {\n const [start, end] = event.detail;\n this.setData({\n show: false,\n date: `${this.formatDate(start)} - ${this.formatDate(end)}`,\n });\n },\n});\n
Tips: 默认情况下,日期区间的起止时间不能为同一天,可以通过设置 allow-same-day 属性来允许选择同一天。
将show-confirm
设置为false
可以隐藏确认按钮,这种情况下选择完成后会立即触发confirm
事件。
<van-calendar show="{{ show }}" show-confirm="{{ false }}" />\n
通过color
属性可以自定义日历的颜色,对选中日期和底部按钮生效。
<van-calendar show="{{ show }}" color="#07c160" />\n
通过min-date
和max-date
定义日历的范围,需要注意的是min-date
和max-date
的区间不宜过大,否则会造成严重的性能问题。
<van-calendar\n show="{{ show }}"\n min-date="{{ minDate }}"\n max-date="{{ maxDate }}"\n/>\n
Page({\n data: {\n show: false,\n minDate: new Date(2010, 0, 1).getTime(),\n maxDate: new Date(2010, 0, 31).getTime(),\n },\n});\n
通过confirm-text
设置按钮文字,通过confirm-disabled-text
设置按钮禁用时的文字。
<van-calendar\n show="{{ show }}"\n type="range"\n confirm-text="完成"\n confirm-disabled-text="请选择结束时间"\n/>\n
通过传入formatter
函数来对日历上每一格的内容进行格式化
<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n data: {\n formatter(day) {\n const month = day.date.getMonth() + 1;\n const date = day.date.getDate();\n\n if (month === 5) {\n if (date === 1) {\n day.topInfo = '劳动节';\n } else if (date === 4) {\n day.topInfo = '五四青年节';\n } else if (date === 11) {\n day.text = '今天';\n }\n }\n\n if (day.type === 'start') {\n day.bottomInfo = '入住';\n } else if (day.type === 'end') {\n day.bottomInfo = '离店';\n }\n\n return day;\n },\n },\n});\n
通过position
属性自定义弹出层的弹出位置,可选值为top
、left
、right
。
<van-calendar show="{{ show }}" round="false" position="right" />\n
选择日期区间时,可以通过max-range
属性来指定最多可选天数,选择的范围超过最多可选天数时,会弹出相应的提示文案。
<van-calendar type="range" max-range="{{ 3 }}" />\n
通过 first-day-of-week
属性设置一周从哪天开始。
<van-calendar first-day-of-week="{{ 1 }}" />\n
将poppable
设置为false
,日历会直接展示在页面内,而不是以弹层的形式出现。
<van-calendar\n title="日历"\n poppable="{{ false }}"\n show-confirm="{{ false }}"\n class="calendar"\n/>\n
.calendar {\n --calendar-height: 500px;\n}\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 选择类型:single 表示选择单个日期,multiple 表示选择多个日期,range 表示选择日期区间 | string | single |
title | 日历标题 | string | 日期选择 |
color | 主题色,对底部按钮和选中日期生效 | string | #ee0a24 |
min-date | 可选择的最小日期 | timestamp | 当前日期 |
max-date | 可选择的最大日期 | timestamp | 当前日期的六个月后 |
default-date | 默认选中的日期,type 为multiple 或range 时为数组 | timestamp | timestamp[] | 今天 |
row-height | 日期行高 | number | string | 64 |
formatter | 日期格式化函数 | (day: Day) => Day | - |
poppable | 是否以弹层的形式展示日历 | boolean | true |
show-mark | 是否显示月份背景水印 | boolean | true |
show-title | 是否展示日历标题 | boolean | true |
show-subtitle | 是否展示日历副标题(年月) | boolean | true |
show-confirm | 是否展示确认按钮 | boolean | true |
confirm-text | 确认按钮的文字 | string | 确定 |
confirm-disabled-text | 确认按钮处于禁用状态时的文字 | string | 确定 |
first-day-of-week | 设置周起始日 | 0~6 | 0 |
readonly v1.9.1 | 是否为只读状态,只读状态下不能选择日期 | boolean | false |
当 Calendar 的 poppable
为 true
时,支持以下 props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示日历弹窗 | boolean | false |
position | 弹出位置,可选值为 top right left | string | bottom |
round | 是否显示圆角弹窗 | boolean | true |
close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | true |
safe-area-inset-bottom | 是否开启底部安全区适配 | boolean | true |
当 Calendar 的 type
为 range
时,支持以下 props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
max-range | 日期区间最多可选天数,默认无限制 | number | string | - |
range-prompt | 范围选择超过最多可选天数时的提示文案 | string | null | 选择天数不能超过 xx 天 |
show-range-prompt | 范围选择超过最多可选天数时,是否展示提示文案 | boolean | true |
allow-same-day | 是否允许日期范围的起止时间为同一天 | boolean | false |
日历中的每个日期都对应一个 Day 对象,通过formatter
属性可以自定义 Day 对象的内容。
键名 | 说明 | 类型 |
---|---|---|
date | 日期对应的 Date 对象 | Date |
type | 日期类型,可选值为selected 、start 、middle 、end 、disabled | string |
text | 中间显示的文字 | string |
topInfo | 上方的提示信息 | string |
bottomInfo | 下方的提示信息 | string |
className | 自定义 className | string |
事件名 | 说明 | 回调参数 |
---|---|---|
select | 点击任意日期时触发 | value: Date | Date[] |
unselect | 当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发 | value: Date |
confirm | 日期选择完成后触发,若show-confirm 为true ,则点击确认按钮后触发 | value: Date | Date[] |
open | 打开弹出层时触发 | - |
close | 关闭弹出层时触发 | - |
opened | 打开弹出层且动画结束后触发 | - |
closed | 关闭弹出层且动画结束后触发 | - |
over-range | 范围选择超过最多可选天数时触发 | - |
click-subtitle v1.8.1 | 点击日历副标题时触发 | WechatMiniprogram.TouchEvent |
名称 | 说明 |
---|---|
title | 自定义标题 |
footer | 自定义底部区域内容 |
通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
reset | 重置选中的日期到默认值 | - | - |
商品卡片,用于展示商品的图片、价格等信息。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-card": "@vant/weapp/card/index"\n}\n
<van-card\n num="2"\n price="2.00"\n desc="描述信息"\n title="商品标题"\n thumb="{{ imageURL }}"\n/>\n
可以通过插槽添加定制内容。
<van-card\n num="2"\n tag="标签"\n price="10.00"\n desc="描述信息"\n title="商品标题"\n thumb="{{ imageURL }}"\n>\n <view slot="footer">\n <van-button size="mini">按钮</van-button>\n <van-button size="mini">按钮</van-button>\n </view>\n</van-card>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
thumb | 左侧图片 | string | - |
thumb-mode | 左侧图片裁剪、缩放的模式,可选值参考小程序 image 组件 mode 属性值 | string | aspectFit |
title | 标题 | string | - |
desc | 描述 | string | - |
tag | 标签 | string | - |
num | 商品数量 | string | number | - |
price | 商品价格 | string | number | - |
origin-price | 商品划线原价 | string | number | - |
centered | 内容是否垂直居中 | string | false |
currency | 货币符号 | string | ¥ |
thumb-link | 点击左侧图片后跳转的链接地址 | string | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo |
lazy-load | 是否开启图片懒加载 | boolean | false |
名称 | 说明 |
---|---|
title | 自定义标题栏,如果设置了title 属性则不生效 |
desc | 自定义描述栏,如果设置了desc 属性则不生效 |
num | 自定义数量 |
price | 自定义价格 |
origin-price | 自定义商品原价,如果设置了origin-price 属性则不生效 |
price-top | 自定义价格上方区域 |
bottom | 自定义价格下方区域 |
thumb | 自定义图片,如果设置了thumb 属性则不生效 |
tag | 自定义图片角标,如果设置了tag 属性则不生效 |
tags | 自定义描述下方标签区域 |
footer | 自定义右下角内容 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
thumb-class | 左侧图片样式类 |
title-class | 标题样式类 |
price-class | 价格样式类 |
origin-price-class | 划线原价样式类 |
desc-class | 描述样式类 |
num-class | 数量样式类 |
单元格为列表中的单个展示项。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-cell": "@vant/weapp/cell/index",\n "van-cell-group": "@vant/weapp/cell-group/index"\n}\n
Cell
可以单独使用,也可以与CellGroup
搭配使用。CellGroup
可以为Cell
提供上下外边框。
<van-cell-group>\n <van-cell title="单元格" value="内容" />\n <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n
通过 CellGroup
的 inset
属性,可以将单元格转换为圆角卡片风格(从 1.7.2 版本开始支持)。
<van-cell-group inset>\n <van-cell title="单元格" value="内容" />\n <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n
通过size
属性可以控制单元格的大小。
<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n
通过icon
属性在标题左侧展示图标。
<van-cell title="单元格" icon="location-o" />\n
设置is-link
属性后会在单元格右侧显示箭头,并且可以通过arrow-direction
属性控制箭头方向。
<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n
可以通过url
属性进行页面跳转,通过link-type
属性控制跳转类型。
<van-cell\n is-link\n title="单元格"\n link-type="navigateTo"\n url="/pages/dashboard/index"\n/>\n
通过CellGroup
的title
属性可以指定分组标题。
<van-cell-group title="分组1">\n <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n <van-cell title="单元格" value="内容" />\n</van-cell-group>\n
如以上用法不能满足你的需求,可以使用插槽来自定义内容。
<van-cell value="内容" icon="shop-o" is-link>\n <view slot="title">\n <view class="van-cell-text">单元格</view>\n <van-tag type="danger">标签</van-tag>\n </view>\n</van-cell>\n<van-cell title="单元格">\n <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n
通过center
属性可以让Cell
的左右内容都垂直居中。
<van-cell center title="单元格" value="内容" label="描述信息" />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 分组标题 | string | - |
inset v1.7.2 | 是否展示为圆角卡片风格 | boolean | false |
border | 是否显示外边框 | boolean | true |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | string | - |
title | 左侧标题 | string | number | - |
title-width | 标题宽度,须包含单位 | string | - |
value | 右侧内容 | string | number | - |
label | 标题下方的描述信息 | string | - |
size | 单元格大小,可选值为 large | string | - |
border | 是否显示下边框 | boolean | true |
center | 是否使内容垂直居中 | boolean | false |
url | 点击后跳转的链接地址 | string | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo |
clickable | 是否开启点击反馈 | boolean | false |
is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false |
required | 是否显示表单必填星号 | boolean | false |
arrow-direction | 箭头方向,可选值为 left up down | string | - |
use-label-slot | 是否使用 label slot | boolean | false |
title-style v1.4.0 | 标题样式 | string | - |
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击单元格时触发 | - |
名称 | 说明 |
---|---|
- | 自定义value 显示内容,如果设置了value 属性则不生效 |
title | 自定义title 显示内容,如果设置了title 属性则不生效 |
label | 自定义label 显示内容,需要设置 use-label-slot 属性 |
icon | 自定义icon 显示内容,如果设置了icon 属性则不生效 |
right-icon | 自定义右侧按钮,默认是arrow ,如果设置了is-link 属性则不生效 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
title-class | 标题样式类 |
label-class | 描述信息样式类 |
value-class | 右侧内容样式类 |
在一组备选项中进行多选。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-checkbox": "@vant/weapp/checkbox/index",\n "van-checkbox-group": "@vant/weapp/checkbox-group/index"\n}\n
通过value
绑定复选框的勾选状态。
<van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>\n
Page({\n data: {\n checked: true,\n },\n\n onChange(event) {\n this.setData({\n checked: event.detail,\n });\n },\n});\n
通过设置disabled
属性可以禁用复选框。
<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n 复选框\n</van-checkbox>\n
将shape
属性设置为square
,复选框的形状会变成方形。
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n 复选框\n</van-checkbox>\n
通过checked-color
属性可以自定义选中状态下的图标颜色。
<van-checkbox\n value="{{ checked }}"\n checked-color="#07c160"\n bind:change="onChange"\n>\n 复选框\n</van-checkbox>\n
通过icon-size
属性可以自定义图标的大小。
<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n
通过 icon 插槽自定义图标。
<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">\n 自定义图标\n <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />\n</van-checkbox>\n
Page({\n data: {\n checked: true,\n activeIcon: '//img.yzcdn.cn/icon-active.png',\n inactiveIcon: '//img.yzcdn.cn/icon-normal.png',\n },\n\n onChange(event) {\n this.setData({\n checked: event.detail,\n });\n },\n});\n
通过设置label-disabled
属性可以禁用复选框文本点击。
<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n
需要与van-checkbox-group
一起使用,选中值是一个数组,通过value
绑定在van-checkbox-group
上,数组中的项即为选中的Checkbox
的name
属性设置的值。
<van-checkbox-group value="{{ result }}" bind:change="onChange">\n <van-checkbox name="a">复选框 a</van-checkbox>\n <van-checkbox name="b">复选框 b</van-checkbox>\n <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n
Page({\n data: {\n result: ['a', 'b'],\n },\n\n onChange(event) {\n this.setData({\n result: event.detail,\n });\n },\n});\n
<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n <van-checkbox name="a">复选框 a</van-checkbox>\n <van-checkbox name="b">复选框 b</van-checkbox>\n <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n
此时你需要再引入Cell
和CellGroup
组件,并通过 checkbox 的 toggle 方法手动触发切换。
<van-checkbox-group value="{{ result }}" bind:change="onChange">\n <van-cell-group>\n <van-cell\n wx:for="{{ list }}"\n wx:key="index"\n title="复选框 {{ item }}"\n value-class="value-class"\n clickable\n data-index="{{ index }}"\n bind:click="toggle"\n >\n <van-checkbox\n catch:tap="noop"\n class="checkboxes-{{ index }}"\n name="{{ item }}"\n />\n </van-cell>\n </van-cell-group>\n</van-checkbox-group>\n
Page({\n data: {\n list: ['a', 'b', 'c'],\n result: ['a', 'b'],\n },\n\n onChange(event) {\n this.setData({\n result: event.detail,\n });\n },\n\n toggle(event) {\n const { index } = event.currentTarget.dataset;\n const checkbox = this.selectComponent(`.checkboxes-${index}`);\n checkbox.toggle();\n },\n\n noop() {},\n});\n
.value-class {\n flex: none !important;\n}\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标识 Checkbox 名称 | string | - |
shape | 形状,可选值为 round square | string | round |
value | 是否为选中状态 | boolean | false |
disabled | 是否禁用单选框 | boolean | false |
label-disabled | 是否禁用单选框内容点击 | boolean | false |
label-position | 文本位置,可选值为 left | string | right |
use-icon-slot | 是否使用 icon slot | boolean | false |
checked-color | 选中状态颜色 | string | #1989fa |
icon-size | icon 大小 | string | number | 20px |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
value | 所有选中项的 name | Array | - |
disabled | 是否禁用所有单选框 | boolean | false |
max | 设置最大可选数 | number | 0 (无限制) |
direction v1.7.0 | 排列方向,可选值为 horizontal | string | vertical |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
icon-class | 图标样式类 |
label-class | 描述信息样式类 |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
名称 | 说明 |
---|---|
- | 自定义文本 |
icon | 自定义图标 |
通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
toggle | - | - | 切换选中状态 |
圆环形的进度条组件,支持进度渐变动画。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-circle": "@vant/weapp/circle/index"\n}\n
value
属性表示进度条的目标进度。
<van-circle value="{{ 30 }}" text="text" />\n
通过stroke-width
属性来控制进度条宽度。
<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n
通过color
属性来控制进度条颜色,layer-color
属性来控制轨道颜色。
<van-circle\n value="{{ value }}"\n layer-color="#eeeeee"\n color="#ee0a24"\n text="颜色定制"\n/>\n
color
属性支持传入对象格式来定义渐变色。
<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />\n
Page({\n data: {\n value: 25,\n gradientColor: {\n '0%': '#ffd01e',\n '100%': '#ee0a24',\n },\n },\n});\n
将clockwise
设置为false
,进度会从逆时针方向开始。
<van-circle\n value="{{ value }}"\n color="#07c160"\n clockwise="{{ false }}"\n text="逆时针"\n/>\n
通过size
属性设置圆环直径。
<van-circle value="{{ value }}" size="120" text="大小定制" />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 目标进度 | number | 0 |
type | 指定 canvas 类型,可选值为 2d | string | - |
size | 圆环直径,默认单位为 px | number | 100 |
color | 进度条颜色,传入对象格式可以定义渐变色 | string | object | #1989fa |
layer-color | 轨道颜色 | string | #fff |
fill | 填充颜色 | string | - |
speed | 动画速度(单位为 value/s) | number | 50 |
text | 文字 | string | - |
stroke-width | 进度条宽度 | number | 4 |
clockwise | 是否顺时针增加 | boolean | true |
名称 | 说明 |
---|---|
- | 自定义文字内容,如果设置了fill ,插槽内容会被原生组件覆盖 |
Layout 提供了van-row
和van-col
两个组件来进行行列布局。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-row": "@vant/weapp/row/index",\n "van-col": "@vant/weapp/col/index"\n}\n
Layout 组件提供了24列栅格
,通过在Col
上添加span
属性设置列所占的宽度百分比。此外,添加offset
属性可以设置列的偏移宽度,计算方式与 span 相同。
<van-row>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n <van-col span="4">span: 4</van-col>\n <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
通过gutter
属性可以设置列元素之间的间距,默认间距为 0。
<van-row gutter="20">\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
gutter | 列元素之间的间距(单位为 px) | string | number | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | 列元素宽度 | string | number | - |
offset | 列元素偏移距离 | string | number | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-collapse": "@vant/weapp/collapse/index",\n "van-collapse-item": "@vant/weapp/collapse-item/index"\n}\n
通过value
控制展开的面板列表,activeNames
为数组格式。
<van-collapse value="{{ activeNames }}" bind:change="onChange">\n <van-collapse-item title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </van-collapse-item>\n <van-collapse-item title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </van-collapse-item>\n <van-collapse-item title="有赞美业" name="3" disabled>\n 线上拓客,随时预约,贴心顺手的开单收银\n </van-collapse-item>\n</van-collapse>\n
Page({\n data: {\n activeNames: ['1'],\n },\n onChange(event) {\n this.setData({\n activeNames: event.detail,\n });\n },\n});\n
通过accordion
可以设置为手风琴模式,最多展开一个面板,此时activeName
为字符串格式。
<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n <van-collapse-item title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </van-collapse-item>\n <van-collapse-item title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </van-collapse-item>\n <van-collapse-item title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </van-collapse-item>\n</van-collapse>\n
Page({\n data: {\n activeName: '1',\n },\n onChange(event) {\n this.setData({\n activeName: event.detail,\n });\n },\n});\n
van-collapse
提供了 change
, open
和 close
事件。change
事件在面板切换时触发,open
事件在面板展开时触发,close
事件在面板关闭时触发。
<van-collapse\n value="{{ activeNames }}"\n bind:change="onChange"\n bind:open="onOpen"\n bind:close="onClose"\n>\n <van-collapse-item title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </van-collapse-item>\n <van-collapse-item title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </van-collapse-item>\n <van-collapse-item title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </van-collapse-item>\n</van-collapse>\n
Page({\n data: {\n activeNames: ['1'],\n },\n onChange(event) {\n this.setData({\n activeNames: event.detail,\n });\n },\n onOpen(event) {\n Toast(`展开: ${event.detail}`);\n },\n onClose(event) {\n Toast(`关闭: ${event.detail}`);\n },\n});\n
<van-collapse value="{{ activeNames }}" bind:change="onChange">\n <van-collapse-item name="1">\n <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n 提供多样店铺模板,快速搭建网上商城\n </van-collapse-item>\n <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </van-collapse-item>\n</van-collapse>\n
Page({\n data: {\n activeNames: ['1'],\n },\n onChange(event) {\n this.setData({\n activeNames: event.detail,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前展开面板的 name | 非手风琴模式:(string | number)[] 手风琴模式:string | number | - |
accordion | 是否开启手风琴模式 | boolean | false |
border | 是否显示外边框 | boolean | true |
事件名 | 说明 | 参数 |
---|---|---|
change | 切换面板时触发 | activeNames: string | Array |
open | 展开面板时触发 | currentName: string | number |
close | 关闭面板时触发 | currentName: string | number |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 唯一标识符,默认为索引值 | string | number | index |
title | 标题栏左侧内容 | string | number | - |
icon | 标题栏左侧图标名称或图片链接,可选值见 Icon 组件 | string | - |
value | 标题栏右侧内容 | string | number | - |
label | 标题栏描述信息 | string | - |
border | 是否显示内边框 | boolean | true |
is-link | 是否展示标题栏右侧箭头并开启点击反馈 | boolean | true |
clickable | 是否开启点击反馈 | boolean | false |
disabled | 是否禁用面板 | boolean | false |
名称 | 说明 |
---|---|
- | 面板内容 |
value | 自定义显示内容 |
icon | 自定义icon |
title | 自定义title |
right-icon | 自定义右侧按钮,默认是arrow |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
content-class | 内容样式类 |
Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。
在 app.wxss 中引入内置样式。
@import '@vant/weapp/common/index.wxss';\n
当文本内容长度超过容器最大宽度时,自动省略多余的文本。
<view class="van-ellipsis">\n 这是一段宽度限制 250px 的文字,后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n 这是一段最多显示两行的文字,后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n 这是一段最多显示三行的文字,后面的内容会省略。\n</view>\n
为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。
<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n
推荐在 app.wxss 中设置以下全局字体,以保证在不同设备上提供最佳的视觉体验。
page {\n font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sans-serif;\n}\n
用于配置 Vant Weapp 组件的主题样式,从 v1.7.0
版本开始支持。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-config-provider": "@vant/weapp/config-provider/index"\n}\n
Vant Weapp 组件通过丰富的 CSS 变量 来组织样式,通过覆盖这些 CSS 变量,可以实现定制主题、动态切换主题等效果。
以 Button 组件为例,查看组件的样式,可以看到 .van-button--primary
类名上存在以下变量:
.van-button--primary {\n color: var(--button-primary-color, #fff);\n background: var(--button-primary-background-color, #07c160);\n border: var(--button-border-width, 1px) solid var(\n --button-primary-border-color,\n #07c160\n );\n}\n
你可以直接在代码中覆盖这些 CSS 变量,Button 组件的样式会随之发生改变:
/* 添加这段样式后,Primary Button 会变成红色 */\npage {\n --button-primary-background-color: red;\n}\n
ConfigProvider
组件提供了覆盖 CSS 变量的能力,你需要在根节点包裹一个 ConfigProvider
组件,并通过 theme-vars
属性来配置一些主题变量。
<van-config-provider theme-vars="{{ themeVars }}">\n <van-cell-group>\n <van-field label="评分">\n <view slot="input" style="width: 100%">\n <van-rate\n model:value="{{ rate }}"\n data-key="rate"\n bind:change="onChange"\n />\n </view>\n </van-field>\n <van-field label="滑块" border="{{ false }}">\n <view slot="input" style="width: 100%">\n <van-slider\n value="{{ slider }}"\n data-key="slider"\n bind:change="onChange"\n />\n </view>\n </van-field>\n </van-cell-group>\n\n <view style="margin: 16px">\n <van-button round block type="primary">提交</van-button>\n </view>\n</van-config-provider>\n
import Page from '../../common/page';\n\nPage({\n data: {\n rate: 4,\n slider: 50,\n themeVars: {\n rateIconFullColor: '#07c160',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n sliderActiveBackgroundColor: '#07c160',\n buttonPrimaryBorderColor: '#07c160',\n buttonPrimaryBackgroundColor: '#07c160',\n },\n },\n\n onChange(event) {\n const { key } = event.currentTarget.dataset;\n this.setData({\n [key]: event.detail,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
theme-vars | 自定义主题变量 | object | - |
用于实时展示倒计时数值,支持毫秒精度。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-count-down": "@vant/weapp/count-down/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
time
属性表示倒计时总时长,单位为毫秒。
<van-count-down time="{{ time }}" />\n
Page({\n data: {\n time: 30 * 60 * 60 * 1000,\n },\n});\n
通过format
属性设置倒计时文本的内容。
<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n
倒计时默认每秒渲染一次,设置millisecond
属性可以开启毫秒级渲染。
<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />\n
设置use-slot
属性后可以自定义倒计时样式,需要通过bind:change
事件获取timeData
对象并自行渲染,格式见下方表格。
<van-count-down use-slot time="{{ time }}" bind:change="onChange">\n <text class="item">{{ timeData.hours }}</text>\n <text class="item">{{ timeData.minutes }}</text>\n <text class="item">{{ timeData.seconds }}</text>\n</van-count-down>\n
Page({\n data: {\n time: 30 * 60 * 60 * 1000,\n timeData: {},\n },\n\n onChange(e) {\n this.setData({\n timeData: e.detail,\n });\n },\n});\n
.item {\n display: inline-block;\n width: 22px;\n margin-right: 5px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n border-radius: 2px;\n}\n
通过 selectComponent
选择器获取到组件实例后,可以调用start
、pause
、reset
方法。
<van-count-down\n class="control-count-down"\n millisecond\n time="{{ 3000 }}"\n auto-start="{{ false }}"\n format="ss:SSS"\n bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n start() {\n const countDown = this.selectComponent('.control-count-down');\n countDown.start();\n },\n\n pause() {\n const countDown = this.selectComponent('.control-count-down');\n countDown.pause();\n },\n\n reset() {\n const countDown = this.selectComponent('.control-count-down');\n countDown.reset();\n },\n\n finished() {\n Toast('倒计时结束');\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
time | 倒计时时长,单位毫秒 | number | - |
format | 时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒 | string | HH:mm:ss |
auto-start | 是否自动开始倒计时 | boolean | true |
millisecond | 是否开启毫秒级渲染 | boolean | false |
use-slot | 是否使用自定义样式插槽 | boolean | false |
事件名 | 说明 | 回调参数 |
---|---|---|
finish | 倒计时结束时触发 | - |
change | 时间变化时触发,仅在开启use-slot 后才会触发 | timeData |
名称 | 说明 | 类型 |
---|---|---|
days | 剩余天数 | number |
hours | 剩余小时 | number |
minutes | 剩余分钟 | number |
seconds | 剩余秒数 | number |
milliseconds | 剩余毫秒 | number |
通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
start | - | - | 开始倒计时 |
pause | - | - | 暂停倒计时 |
reset | - | - | 重设倒计时,若auto-start 为true ,重设后会自动开始倒计时 |
用于选择时间,支持日期、时分等时间维度,通常与 弹出层 组件配合使用。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-datetime-picker": "@vant/weapp/datetime-picker/index"\n}\n
value
为时间戳。
<van-datetime-picker\n type="datetime"\n value="{{ currentDate }}"\n min-date="{{ minDate }}"\n max-date="{{ maxDate }}"\n bind:input="onInput"\n/>\n
Page({\n data: {\n minHour: 10,\n maxHour: 20,\n minDate: new Date().getTime(),\n maxDate: new Date(2019, 10, 1).getTime(),\n currentDate: new Date().getTime(),\n },\n\n onInput(event) {\n this.setData({\n currentDate: event.detail,\n });\n },\n});\n
value
为时间戳,通过传入 formatter
函数对选项文字进行处理。
<van-datetime-picker\n type="date"\n value="{{ currentDate }}"\n bind:input="onInput"\n min-date="{{ minDate }}"\n formatter="{{ formatter }}"\n/>\n
Page({\n data: {\n currentDate: new Date().getTime(),\n minDate: new Date().getTime(),\n formatter(type, value) {\n if (type === 'year') {\n return `${value}年`;\n }\n if (type === 'month') {\n return `${value}月`;\n }\n return value;\n },\n },\n\n onInput(event) {\n this.setData({\n currentDate: event.detail,\n });\n },\n});\n
value
为时间戳。
<van-datetime-picker\n type="year-month"\n value="{{ currentDate }}"\n min-date="{{ minDate }}"\n bind:input="onInput"\n/>\n
Page({\n data: {\n currentDate: new Date().getTime(),\n minDate: new Date().getTime(),\n },\n\n onInput(event) {\n this.setData({\n currentDate: event.detail,\n });\n },\n});\n
value
为字符串。
<van-datetime-picker\n type="time"\n value="{{ currentDate }}"\n min-hour="{{ minHour }}"\n max-hour="{{ maxHour }}"\n bind:input="onInput"\n/>\n
Page({\n data: {\n currentDate: '12:00',\n minHour: 10,\n maxHour: 20,\n },\n\n onInput(event) {\n this.setData({\n currentDate: event.detail,\n });\n },\n});\n
通过传入 filter
函数,可以对选项数组进行过滤,实现自定义时间间隔。
<van-datetime-picker\n type="time"\n value="{{ currentDate }}"\n filter="{{ filter }}"\n/>\n
Page({\n data: {\n currentDate: '12:00',\n filter(type, options) {\n if (type === 'minute') {\n return options.filter((option) => option % 5 === 0);\n }\n\n return options;\n },\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前选中值 | string | number | - |
type | 类型,可选值为 date time year-month 不建议动态修改 | string | datetime |
min-date | 可选的最小时间,精确到分钟 | number | 十年前 |
max-date | 可选的最大时间,精确到分钟 | number | 十年后 |
min-hour | 可选的最小小时,针对 time 类型 | number | 0 |
max-hour | 可选的最大小时,针对 time 类型 | number | 23 |
min-minute | 可选的最小分钟,针对 time 类型 | number | 0 |
max-minute | 可选的最大分钟,针对 time 类型 | number | 59 |
filter | 选项过滤函数 | (type, values) => values | - |
formatter | 选项格式化函数 | (type, value) => value | - |
title | 顶部栏标题 | string | '' |
show-toolbar | 是否显示顶部栏 | boolean | true |
loading | 是否显示加载状态 | boolean | false |
item-height | 选项高度 | number | 44 |
confirm-button-text | 确认按钮文字 | string | 确认 |
cancel-button-text | 取消按钮文字 | string | 取消 |
visible-item-count | 可见的选项个数 | number | 6 |
事件名称 | 说明 | 回调参数 |
---|---|---|
input | 当值变化时触发的事件 | 当前 value |
change | 当值变化时触发的事件 | 组件实例 |
confirm | 点击完成按钮时触发的事件 | 当前 value |
cancel | 点击取消按钮时触发的事件 | - |
在change
事件中,可以获取到组件实例,对组件进行相应的更新等操作:
函数 | 说明 |
---|---|
getColumnValue(index) | 获取对应列中选中的值 |
setColumnValue(index, value) | 设置对应列中选中的值 |
getColumnValues(index) | 获取对应列中所有的备选值 |
setColumnValues(index, values) | 设置对应列中所有的备选值 |
getValues() | 获取所有列中被选中的值,返回一个数组 |
setValues(values) | values 为一个数组,设置所有列中被选中的值 |
类名 | 说明 |
---|---|
active-class | 选中项样式类 |
toolbar-class | 顶部栏样式类 |
column-class | 列样式类 |
弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作,支持函数调用和组件调用两种方式。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-dialog": "@vant/weapp/dialog/index"\n}\n
用于提示一些消息,只包含一个确认按钮。
<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n title: '标题',\n message: '弹窗内容',\n}).then(() => {\n // on close\n});\n\nDialog.alert({\n message: '弹窗内容',\n}).then(() => {\n // on close\n});\n
用于确认消息,包含取消和确认按钮。
<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n title: '标题',\n message: '弹窗内容',\n})\n .then(() => {\n // on confirm\n })\n .catch(() => {\n // on cancel\n });\n
将 theme 选项设置为 round-button
可以展示圆角按钮风格的弹窗。
<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n title: '标题',\n message: '弹窗内容',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n\nDialog.alert({\n message: '弹窗内容',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n
通过 beforeClose
属性可以传入一个回调函数,在弹窗关闭前进行特定操作。
<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n setTimeout(() => {\n if (action === 'confirm') {\n resolve(true);\n } else {\n // 拦截取消操作\n resolve(false);\n }\n }, 1000);\n});\n\nDialog.confirm({\n title: '标题',\n message: '弹窗内容'\n beforeClose\n});\n
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
<van-dialog\n use-slot\n title="标题"\n show="{{ show }}"\n show-cancel-button\n confirm-button-open-type="getUserInfo"\n bind:close="onClose"\n bind:getuserinfo="getUserInfo"\n>\n <image src="https://img.yzcdn.cn/1.jpg" />\n</van-dialog>\n
Page({\n data: {\n show: true,\n },\n\n getUserInfo(event) {\n console.log(event.detail);\n },\n\n onClose() {\n this.setData({ show: false });\n },\n});\n
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Dialog | options | Promise | 展示弹窗 |
Dialog.alert | options | Promise | 展示消息提示弹窗 |
Dialog.confirm | options | Promise | 展示消息确认弹窗 |
Dialog.setDefaultOptions | options | void | 修改默认配置,对所有 Dialog 生效 |
Dialog.resetDefaultOptions | - | void | 重置默认配置,对所有 Dialog 生效 |
Dialog.close | - | void | 关闭弹窗 |
Dialog.stopLoading | - | void | 停止按钮的加载状态 |
通过函数调用 Dialog 时,支持传入以下选项:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | - |
width | 弹窗宽度,默认单位为px | string | number | 320px |
message | 文本内容,支持通过\\n 换行 | string | - |
messageAlign | 内容对齐方式,可选值为left right | string | center |
theme | 样式风格,可选值为round-button | string | default |
zIndex | z-index 层级 | number | 100 |
className | 自定义类名,dialog 在自定义组件内时无效 | string | ‘’ |
customStyle | 自定义样式 | string | ‘’ |
selector | 自定义选择器 | string | van-dialog |
showConfirmButton | 是否展示确认按钮 | boolean | true |
showCancelButton | 是否展示取消按钮 | boolean | false |
confirmButtonText | 确认按钮的文案 | string | 确认 |
cancelButtonText | 取消按钮的文案 | string | 取消 |
overlay | 是否展示遮罩层 | boolean | true |
overlayStyle | 自定义遮罩层样式 | object | - |
closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | boolean | false |
asyncClose | 已废弃,将在 2.0.0 移除,请使用 beforeClose 属性代替 | boolean | false |
beforeClose | 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise | (action) => boolean | Promise<boolean> | - |
context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | object | 当前页面 |
transition | 动画名称,可选值为fade none | string | scale |
confirmButtonOpenType | 确认按钮的微信开放能力,具体支持可参考 微信官方文档 | string | - |
使用confirmButtonOpenType
后,支持以下选项:
参数 | 说明 | 类型 | 默认值 | open-type |
---|---|---|---|---|
appParameter | 打开 APP 时,向 APP 传递的参数 | string | - | launchApp |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en | getUserInfo |
sessionFrom | 会话来源 | string | - | contact |
businessId | 客服消息子商户 id | number | - | contact |
sendMessageTitle | 会话内消息卡片标题 | string | 当前标题 | contact |
sendMessagePath | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 | contact |
sendMessageImg | sendMessageImg | string | 截图 | contact |
showMessageCard | 显示会话内消息卡片 | string | false | contact |
通过组件调用 Dialog 时,支持以下 Props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示弹窗 | boolean | - |
title | 标题 | string | - |
width | 弹窗宽度,默认单位为px | string | number | 320px |
message | 文本内容,支持通过\\n 换行 | string | - |
theme | 样式风格,可选值为round-button | string | default |
message-align | 内容对齐方式,可选值为left right | string | center |
z-index | z-index 层级 | number | 100 |
class-name | 自定义类名,dialog 在自定义组件内时无效 | string | ‘’ |
custom-style | 自定义样式 | string | ‘’ |
show-confirm-button | 是否展示确认按钮 | boolean | true |
show-cancel-button | 是否展示取消按钮 | boolean | false |
confirm-button-text | 确认按钮的文案 | string | 确认 |
cancel-button-text | 取消按钮的文案 | string | 取消 |
confirm-button-color | 确认按钮的字体颜色 | string | #ee0a24 |
cancel-button-color | 取消按钮的字体颜色 | string | #333 |
overlay | 是否展示遮罩层 | boolean | true |
overlay-style v1.0.0 | 自定义遮罩层样式 | object | - |
close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | boolean | false |
use-slot | 是否使用自定义内容的插槽 | boolean | false |
use-title-slot | 是否使用自定义标题的插槽 | boolean | false |
async-close | 已废弃,将在 2.0.0 移除,请使用 beforeClose 属性代替 | boolean | false |
before-close | 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise | (action) => boolean | Promise<boolean> | - |
transition | 动画名称,可选值为fade | string | scale |
confirm-button-open-type | 确认按钮的微信开放能力,具体支持可参考 微信官方文档 | string | - |
使用confirm-button-open-type
后,支持以下 Props:
参数 | 说明 | 类型 | 默认值 | open-type |
---|---|---|---|---|
app-parameter | 打开 APP 时,向 APP 传递的参数 | string | - | launchApp |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en | getUserInfo |
session-from | 会话来源 | string | - | contact |
business-id | 客服消息子商户 id | number | - | contact |
send-message-title | 会话内消息卡片标题 | string | 当前标题 | contact |
send-message-path | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 | contact |
send-message-img | sendMessageImg | string | 截图 | contact |
show-message-card | 显示会话内消息卡片 | string | false | contact |
事件 | 说明 | 回调参数 |
---|---|---|
bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源, 枚举为 confirm ,cancel ,overlay |
bind:confirm | 点击确认按钮时触发 | - |
bind:cancel | 点击取消按钮时触发 | - |
bind:getuserinfo | 点击确认按钮时,会返回获取到的用户信息, 从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
bind:contact | 客服消息回调 | - |
bind:getphonenumber | 获取用户手机号回调 | - |
bind:error | 当使用开放能力时,发生错误的回调 | - |
bind:opensetting | 在打开授权设置页后回调 | - |
名称 | 说明 |
---|---|
title | 自定义title 显示内容,如果设置了title 属性则不生效 |
用于将内容分隔为多个区域。
在app.json
或index.json
中引入组件,默认为ES6
版本,ES5
引入方式参见快速上手
"usingComponents": {\n "van-divider": "@vant/weapp/divider/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
<van-divider />\n
<van-divider hairline />\n
<van-divider dashed />\n
<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n
<van-divider\n contentPosition="center"\n customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"\n>\n 文本\n</van-divider>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dashed | 虚线 | boolean | false |
hairline | 细线 | boolean | false |
content-position | 文本位置,left center right | string | - |
custom-style | 自定义样式 | string | - |
名称 | 说明 |
---|---|
默认 | 自定义文本内容 |
向下弹出的菜单列表。
在app.json
或index.json
中引入组件,默认为ES6
版本,ES5
引入方式参见快速上手。
"usingComponents": {\n "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",\n "van-dropdown-item": "@vant/weapp/dropdown-item/index"\n}\n
<van-dropdown-menu>\n <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n data: {\n option1: [\n { text: '全部商品', value: 0 },\n { text: '新款商品', value: 1 },\n { text: '活动商品', value: 2 },\n ],\n option2: [\n { text: '默认排序', value: 'a' },\n { text: '好评排序', value: 'b' },\n { text: '销量排序', value: 'c' },\n ],\n value1: 0,\n value2: 'a',\n },\n});\n
<van-dropdown-menu>\n <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n <van-dropdown-item id="item" title="{{ itemTitle }}">\n <van-cell title="{{ switchTitle1 }}">\n <van-switch\n slot="right-icon"\n size="24px"\n style="height: 26px"\n checked="{{ switch1 }}"\n active-color="#ee0a24"\n bind:change="onSwitch1Change"\n />\n </van-cell>\n <van-cell title="{{ switchTitle2 }}">\n <van-switch\n slot="right-icon"\n size="24px"\n style="height: 26px"\n checked="{{ switch2 }}"\n active-color="#ee0a24"\n bind:change="onSwitch2Change"\n />\n </van-cell>\n <view style="padding: 5px 16px;">\n <van-button type="danger" block round bind:click="onConfirm">\n 确认\n </van-button>\n </view>\n </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n data: {\n switchTitle1: '包邮',\n switchTitle2: '团购',\n itemTitle: '筛选',\n option1: [\n { text: '全部商品', value: 0 },\n { text: '新款商品', value: 1 },\n { text: '活动商品', value: 2 },\n ],\n value1: 0,\n },\n\n onConfirm() {\n this.selectComponent('#item').toggle();\n },\n\n onSwitch1Change({ detail }) {\n this.setData({ switch1: detail });\n },\n\n onSwitch2Change({ detail }) {\n this.setData({ switch2: detail });\n },\n});\n
<van-dropdown-menu active-color="#1989fa">\n <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
<van-dropdown-menu direction="up">\n <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
<van-dropdown-menu>\n <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />\n <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />\n</van-dropdown-menu>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
active-color | 菜单标题和选项的选中态颜色 | string | #ee0a24 |
z-index | 菜单栏 z-index 层级 | number | 10 |
duration | 动画时长,单位毫秒 | number | 200 |
direction | 菜单展开方向,可选值为 up | string | down |
overlay | 是否显示遮罩层 | boolean | true |
close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | boolean | true |
close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | boolean | true |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前选中项对应的 value | number | string | - |
title | 菜单项标题 | string | 当前选中项文字 |
options | 选项数组 | Option[] | [] |
disabled | 是否禁用菜单 | boolean | false |
title-class | 标题额外类名 | string | - |
popup-style | 自定义弹出层样式 | string | - |
事件名 | 说明 | 回调参数 |
---|---|---|
change | 点击选项导致 value 变化时触发 | value |
open | 打开菜单栏时触发 | - |
close | 关闭菜单栏时触发 | - |
opened | 打开菜单栏且动画结束后触发 | - |
closed | 关闭菜单栏且动画结束后触发 | - |
通过 selectComponent(id) 可访问。
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
toggle | 切换菜单展示状态,传true 为显示,false 为隐藏,不传参为取反 | show?: boolean | - |
键名 | 说明 | 类型 |
---|---|---|
text | 文字 | string |
value | 标识符 | number | string |
icon | 左侧图标名称或图片链接 | string |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
空状态时的占位提示。
在app.json
或index.json
中引入组件,默认为ES6
版本,ES5
引入方式参见快速上手。
"usingComponents": {\n "van-empty": "@vant/weapp/empty/index"\n}\n
<van-empty description="描述文字" />\n
Empty 组件内置了多种占位图片类型,可以在不同业务场景下使用。
<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n
需要自定义图片时,可以在 image 属性中传入任意图片 URL。
<van-empty\n class="custom-image"\n image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n description="描述文字"\n/>\n
通过默认插槽可以在 Empty 组件的下方插入内容。
<van-empty description="描述文字">\n <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n .bottom-button {\n width: 160px;\n height: 40px;\n }\n</style>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
image | 图片类型,可选值为 error network search ,支持传入图片 URL | string | default |
description | 图片下方的描述文字 | string | - |
名称 | 说明 |
---|---|
- | 自定义底部内容 |
image | 自定义图标 |
description | 自定义描述文字 |
用户可以在文本框内输入或编辑文字。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-field": "@vant/weapp/field/index"\n}\n
<van-cell-group>\n <van-field\n value="{{ value }}"\n placeholder="请输入用户名"\n border="{{ false }}"\n bind:change="onChange"\n />\n</van-cell-group>\n
Page({\n data: {\n value: '',\n },\n\n onChange(event) {\n // event.detail 为当前输入的值\n console.log(event.detail);\n },\n});\n
最低基础库版本在 2.9.3 以上时,可以使用简易双向绑定。
<van-cell-group>\n <van-field\n model:value="{{ value }}"\n placeholder="请输入用户名"\n border="{{ false }}"\n />\n</van-cell-group>\n
Page({\n data: {\n value: '',\n },\n});\n
根据type
属性定义不同类型的输入框。
<van-cell-group>\n <van-field\n value="{{ username }}"\n required\n clearable\n label="用户名"\n icon="question-o"\n placeholder="请输入用户名"\n bind:click-icon="onClickIcon"\n />\n\n <van-field\n value="{{ password }}"\n type="password"\n label="密码"\n placeholder="请输入密码"\n required\n border="{{ false }}"\n />\n</van-cell-group>\n
<van-cell-group>\n <van-field\n value="输入框已禁用"\n label="用户名"\n left-icon="contact"\n disabled\n border="{{ false }}"\n />\n</van-cell-group>\n
通过error
或者error-message
属性增加对应的错误提示。
<van-cell-group>\n <van-field\n value="{{ username }}"\n label="用户名"\n placeholder="请输入用户名"\n error\n />\n <van-field\n value="{{ phone }}"\n label="手机号"\n placeholder="请输入手机号"\n error-message="手机号格式错误"\n border="{{ false }}"\n />\n</van-cell-group>\n
可以通过input-align
属性设置内容的对齐方式。
<van-cell-group>\n <van-field\n value="{{ username3 }}"\n label="用户名"\n placeholder="请输入用户名"\n input-align="right"\n />\n</van-cell-group>\n
对于 textarea,可以通过autosize
属性设置高度自适应。
<van-cell-group>\n <van-field\n value="{{ message }}"\n label="留言"\n type="textarea"\n placeholder="请输入留言"\n autosize\n border="{{ false }}"\n />\n</van-cell-group>\n
通过 button slot 可以在输入框尾部插入按钮。
<van-cell-group>\n <van-field\n value="{{ sms }}"\n center\n clearable\n label="短信验证码"\n placeholder="请输入短信验证码"\n border="{{ false }}"\n use-button-slot\n >\n <van-button slot="button" size="small" type="primary">\n 发送验证码\n </van-button>\n </van-field>\n</van-cell-group>\n
由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
相关的讨论可以查看微信开放社区。
由于微信小程序的 input 组件和 textarea 组件是原生组件,遵循原生组件的限制,详情可以查看原生组件说明。
微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同,在 iOS 中会有默认的 padding
,且无法置 0。
同时 placeholder-style
对 vertical-align
、line-height
等大量 css 属性都不生效。
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
微信已经在 2.10.0
基础库版本后支持移除默认的 padding
,但低版本仍有问题。详情可以查看 微信开放社区。
这是微信小程序的 input 组件本身的问题,如果需要兼容手写输入法的场景,可以在 blur
事件中取到输入的值。
相关的讨论可以查看微信开放社区。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
label | 输入框左侧文本 | string | - |
size | 单元格大小,可选值为 large | string | - |
value | 当前输入的值 | string | number | - |
type | 可设置为任意原生类型, 如 number idcard textarea digit | string | text |
fixed | 如果 type 为 textarea 且在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true | boolean | false |
focus | 获取焦点 | boolean | false |
border | 是否显示内边框 | boolean | true |
disabled | 是否禁用输入框 | boolean | false |
readonly | 是否只读 | boolean | false |
clearable | 是否启用清除控件 | boolean | false |
clickable | 是否开启点击反馈 | boolean | false |
required | 是否显示表单必填星号 | boolean | false |
center | 是否使内容垂直居中 | boolean | false |
password | 是否是密码类型 | boolean | false |
title-width | 标题宽度 | string | 6.2em |
maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | number | -1 |
placeholder | 输入框为空时占位符 | string | - |
placeholder-style | 指定 placeholder 的样式 | string | - |
custom-style | 自定义样式 | string | - |
is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false |
arrow-direction | 箭头方向,可选值为 left up down | string | - |
show-word-limit | 是否显示字数统计,需要设置maxlength 属性 | boolean | false |
error | 是否将输入内容标红 | boolean | false |
error-message | 底部错误提示文案,为空时不展示 | string | '' |
error-message-align | 底部错误提示文案对齐方式,可选值为 center right | string | '' |
input-align | 输入框内容对齐方式,可选值为 center right | string | left |
autosize | 是否自适应内容高度,只对 textarea 有效, 可传入对象,如 { maxHeight: 100, minHeight: 50 }, 单位为 px | boolean | object | false |
left-icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | string | - |
right-icon | 右侧图标名称或图片链接,可选值见 Icon 组件 | string | - |
confirm-type | 设置键盘右下角按钮的文字,仅在 type=‘text’ 时生效 | string | done |
confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起,在 type=‘textarea’ 时无效 | boolean | false |
hold-keyboard | focus 时,点击页面的时候不收起键盘 | boolean | false |
cursor-spacing | 输入框聚焦时底部与键盘的距离 | number | 50 |
adjust-position | 键盘弹起时,是否自动上推页面 | boolean | true |
show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | boolean | true |
selection-start | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | number | -1 |
selection-end | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | number | -1 |
auto-focus | 自动聚焦,拉起键盘 | boolean | false |
disable-default-padding | 是否去掉 iOS 下的默认内边距,只对 textarea 有效 | boolean | true |
cursor | 指定 focus 时的光标位置 | number | -1 |
clear-trigger v1.8.4 | 显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 | string | focus |
always-embed v1.9.2 | 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | boolean | false |
事件 | 说明 | 回调参数 |
---|---|---|
bind:input | 输入内容时触发 | event.detail: 当前输入值 |
bind:change | 输入内容时触发 | event.detail: 当前输入值 |
bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
bind:click-icon | 点击尾部图标时触发 | - |
bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; event.detail.height: 键盘高度 |
bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; event.detail.cursor: 游标位置(如果 type 不为 textarea ,值为 0 ) |
bind:clear | 点击清空控件时触发 | - |
bind:click-input | 点击输入区域时触发 | - |
bind:linechange | 输入框行数变化时调用,只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } |
名称 | 说明 |
---|---|
label | 自定义输入框标签,如果设置了label 属性则不生效 |
left-icon | 自定义输入框头部图标 |
right-icon | 自定义输入框尾部图标 |
button | 自定义输入框尾部按钮 |
input | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效 |
类名 | 说明 |
---|---|
label-class | 左侧文本样式类 |
input-class | 输入框样式类 |
right-icon-class | 右侧图标样式类 |
用于为商品相关操作提供便捷交互。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-goods-action": "@vant/weapp/goods-action/index",\n "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",\n "van-goods-action-button": "@vant/weapp/goods-action-button/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
<van-goods-action>\n <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n <van-goods-action-button\n text="加入购物车"\n type="warning"\n bind:click="onClickButton"\n />\n <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n onClickIcon() {\n Toast('点击图标');\n },\n\n onClickButton() {\n Toast('点击按钮');\n },\n});\n
设置dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。
<van-goods-action>\n <van-goods-action-icon icon="chat-o" text="客服" dot />\n <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n <van-goods-action-icon icon="shop-o" text="店铺" />\n <van-goods-action-button text="加入购物车" type="warning" />\n <van-goods-action-button text="立即购买" />\n</van-goods-action>\n
通过color
属性可以自定义按钮的颜色,支持传入linear-gradient
渐变色。
<van-goods-action>\n <van-goods-action-icon icon="chat-o" text="客服" />\n <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n <van-goods-action-icon icon="shop-o" text="店铺" />\n <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n
通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
<van-goods-action>\n <van-goods-action-icon icon="chat-o" text="客服" />\n <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n <van-goods-action-icon icon="shop-o" text="店铺" />\n <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 按钮文字 | string | - |
icon | 图标类型,可选值见icon 组件 | string | - |
info | 图标右上角提示信息 | string | number | - |
url | 点击后跳转的链接地址 | string | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo |
id | 标识符 | string | - |
disabled | 是否禁用按钮 | boolean | false |
loading | 是否显示为加载状态 | boolean | false |
open-type | 微信开放能力,具体支持可参考 微信官方文档 | string | - |
app-parameter | 打开 APP 时,向 APP 传递的参数 | string | - |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en |
session-from | 会话来源 | string | - |
send-message-title | 会话内消息卡片标题 | string | 当前标题 |
send-message-path | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 |
send-message-img | sendMessageImg | string | 截图 |
show-message-card | 显示会话内消息卡片 | string | false |
class-prefix v1.10.1 | 类名前缀 | string | van-icon |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 按钮文字 | string | - |
color | 按钮颜色,支持传入 linear-gradient 渐变色 | string | - |
url | 点击后跳转的链接地址 | string | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo |
id | 标识符 | string | - |
type | 按钮类型,可选值为 primary warning danger | string | danger |
plain | 是否为朴素按钮 | boolean | false |
size | 按钮尺寸,可选值为 normal large small mini | string | normal |
disabled | 是否禁用按钮 | boolean | false |
loading | 是否显示为加载状态 | boolean | false |
open-type | 微信开放能力,具体支持可参考 微信官方文档 | string | - |
app-parameter | 打开 APP 时,向 APP 传递的参数 | string | - |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en |
session-from | 会话来源 | string | - |
send-message-title | 会话内消息卡片标题 | string | 当前标题 |
send-message-path | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 |
send-message-img | sendMessageImg | string | 截图 |
show-message-card | 显示会话内消息卡片 | string | false |
事件名 | 说明 | 参数 |
---|---|---|
click | 按钮点击事件回调 | - |
名称 | 说明 |
---|---|
icon | 自定义图标 |
名称 | 说明 |
---|---|
- | 按钮显示内容 |
类名 | 说明 |
---|---|
icon-class | 图标样式类 |
text-class | 文字样式类 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-grid": "@vant/weapp/grid/index",\n "van-grid-item": "@vant/weapp/grid-item/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
通过icon
属性设置格子内的图标,text
属性设置文字内容。
<van-grid>\n <van-grid-item icon="photo-o" text="文字" />\n <van-grid-item icon="photo-o" text="文字" />\n <van-grid-item icon="photo-o" text="文字" />\n <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n
默认一行展示四个格子,可以通过column-num
自定义列数。
<van-grid column-num="3">\n <van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" />\n</van-grid>\n
通过插槽可以自定义格子展示的内容。
<van-grid column-num="3" border="{{ false }}">\n <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">\n <image\n style="width: 100%; height: 90px;"\n src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"\n />\n </van-grid-item>\n</van-grid>\n
设置square
属性后,格子的高度会和宽度保持一致。
<van-grid square>\n <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n
通过gutter
属性设置格子之间的距离。
<van-grid gutter="{{ 10 }}">\n <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n
将direction
属性设置为horizontal
,可以让宫格的内容呈横向排列。
<van-grid direction="horizontal" column-num="2">\n <van-grid-item icon="photo-o" text="文字" />\n <van-grid-item icon="photo-o" text="文字" />\n <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n
可以通过url
属性进行页面跳转,通过link-type
属性控制跳转类型。
<van-grid clickable column-num="2">\n <van-grid-item\n icon="home-o"\n link-type="navigateTo"\n url="/pages/dashboard/index"\n text="Navigate 跳转"\n />\n <van-grid-item\n icon="search"\n link-type="reLaunch"\n url="/pages/dashboard/index"\n text="ReLaunch 跳转"\n />\n</van-grid>\n
设置dot
属性后,会在图标右上角展示一个小红点。设置badge
属性后,会在图标右上角展示相应的徽标。
<van-grid column-num="2">\n <van-grid-item icon="home-o" text="文字" dot />\n <van-grid-item icon="search" text="文字" badge="99+" />\n</van-grid>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
column-num | 列数 | number | 4 |
icon-size v1.3.2 | 图标大小,默认单位为px | string | 28px |
gutter | 格子之间的间距,默认单位为px | string | number | 0 |
border | 是否显示边框 | boolean | true |
center | 是否将格子内容居中显示 | boolean | true |
square | 是否将格子固定为正方形 | boolean | false |
clickable | 是否开启格子点击反馈 | boolean | false |
direction | 格子内容排列的方向,可选值为 horizontal | string | vertical |
reverse v1.7.0 | 是否调换图标和文本的位置 | boolean | false |
use-slot | 是否使用自定义内容的插槽 | boolean | false |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 文字 | string | - |
icon | 图标名称或图片链接,可选值见 Icon 组件 | string | - |
icon-color | 图标颜色 | string | - |
icon-prefix v1.7.0 | 第三方图标前缀 | string | van-icon |
dot | 是否显示图标右上角小红点 | boolean | false |
badge | 图标右上角徽标的内容 | string | number | - |
url | 点击后跳转的链接地址 | string | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:click | 点击格子时触发 | - |
名称 | 说明 |
---|---|
- | 自定义宫格的所有内容,需要设置use-slot 属性 |
icon | 自定义图标,如果设置了use-slot 或者icon 属性则不生效 |
text | 自定义文字,如果设置了use-slot 或者text 属性则不生效 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
content-class | 内容样式类 |
icon-class | 图标样式类 |
text-class | 文本样式类 |
基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-icon": "@vant/weapp/icon/index"\n}\n
Icon
的name
属性支持传入图标名称或图片链接。
<van-icon name="close" />\n<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />\n
设置dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。
<van-icon name="chat" dot />\n<van-icon name="chat" info="9" />\n<van-icon name="chat" info="99+" />\n
设置color
属性来控制图标颜色。
<van-icon name="chat" color="red" />\n
设置size
属性来控制图标大小。
<van-icon name="chat" size="50px" />\n
如果需要在现有 Icon 的基础上使用更多图标,可以引入第三方 iconfont 对应的字体文件和 CSS 文件,之后就可以在 Icon 组件中直接使用。例如,可以在 app.wxss
文件中引入。
/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n font-family: 'my-icon';\n src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 图标名称或图片链接 | string | - |
dot | 是否显示图标右上角小红点 | boolean | false |
info | 图标右上角文字提示 | string | number | - |
color | 图标颜色 | string | inherit |
size | 图标大小,如 20px ,2em ,默认单位为px | string | number | inherit |
custom-style | 自定义样式 | string | - |
class-prefix | 类名前缀 | string | van-icon |
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击图标时触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
这个是开发者工具本身的问题,可以忽略,具体可以查看微信小程序文档 - 注意事项第 5 条。
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-image": "@vant/weapp/image/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
基础用法与原生 image 标签一致,可以设置src
、width
、height
等原生属性。
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />\n
通过fit
属性可以设置图片填充模式,可选值见下方表格。
<van-image\n width="10rem"\n height="10rem"\n fit="contain"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n
通过round
属性可以设置图片变圆,注意当图片宽高不相等且fit
为contain
或scale-down
时,将无法填充一个完整的圆形。
<van-image\n round\n width="10rem"\n height="10rem"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n
图片懒加载,在即将进入一定范围(上下三屏)时才开始加载。
<van-image\n width="100"\n height="100"\n lazy-load\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n
Image
组件提供了默认的加载中提示,支持通过loading
插槽自定义内容。
<van-image use-loading-slot>\n <van-loading slot="loading" type="spinner" size="20" vertical />\n</van-image>\n
Image
组件提供了默认的加载失败提示,支持通过error
插槽自定义内容。
<van-image use-error-slot>\n <text slot="error">加载失败</text>\n</van-image>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
src | 图片链接 | string | - |
fit | 图片填充模式 | string | fill |
alt | 替代文本 | string | - |
width | 宽度,默认单位为px | string | number | - |
height | 高度,默认单位为px | string | number | - |
radius | 圆角大小,默认单位为px | string | number | 0 |
round | 是否显示为圆形 | boolean | false |
lazy-load | 是否懒加载 | boolean | false |
show-error | 是否展示图片加载失败提示 | boolean | true |
show-loading | 是否展示图片加载中提示 | boolean | true |
use-error-slot | 是否使用 error 插槽 | boolean | false |
use-loading-slot | 是否使用 loading 插槽 | boolean | false |
show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | boolean | false |
名称 | 含义 |
---|---|
contain | 保持宽高缩放图片,使图片的长边能完全显示出来 |
cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 |
fill | 拉伸图片,使图片填满元素 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
none | 保持图片原有尺寸 |
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击图片时触发 | event: Event |
load | 图片加载完毕时触发 | event: Event |
error | 图片加载失败时触发 | event: Event |
名称 | 说明 |
---|---|
loading | 自定义加载中的提示内容 |
error | 自定义加载失败时的提示内容 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
image-class | 图片样式类 |
loading-class | loading 样式类 |
error-class | error 样式类 |
用于列表的索引分类显示和快速定位。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-index-bar": "@vant/weapp/index-bar/index",\n "van-index-anchor": "@vant/weapp/index-anchor/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
点击索引栏时,会自动跳转到对应的IndexAnchor
锚点位置。
<van-index-bar>\n <view>\n <van-index-anchor index="A" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n </view>\n\n <view>\n <van-index-anchor index="B" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n </view>\n\n ...\n</van-index-bar>\n
可以通过index-list
属性自定义展示的索引字符列表。
<van-index-bar index-list="{{ indexList }}">\n <view>\n <van-index-anchor index="1">标题1</van-index-anchor>\n <van-cell title="文本" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n </view>\n\n <view>\n <van-index-anchor index="2">标题2</van-index-anchor>\n <van-cell title="文本" />\n <van-cell title="文本" />\n <van-cell title="文本" />\n </view>\n\n ...\n</van-index-bar>\n
Page({\n data: {\n indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n },\n});\n
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
index-list | 索引字符列表 | string[] | number[] | A-Z | - |
z-index | z-index 层级 | number | 1 | - |
sticky | 是否开启锚点自动吸顶 | boolean | true | - |
sticky-offset-top | 锚点自动吸顶时与顶部的距离 | number | 0 | - |
highlight-color | 索引字符高亮颜色 | string | #07c160 | - |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
use-slot | 是否使用自定义内容的插槽 | boolean | false | - |
index | 索引字符 | string | number | - | - |
事件名 | 说明 | 回调参数 |
---|---|---|
select | 选中字符时触发 | index: 索引字符 |
名称 | 说明 |
---|---|
- | 锚点位置显示内容,默认为索引字符 |
由于 <IndexBar />
内部使用 wx.pageScrollTo 滚动到指定位置,因此只支持页面级滚动,无法在滚动元素中嵌套使用,例如:view
使用 overflow: scroll;
或者 scroll-view
,具体可查看微信小程序文档。历史 issue: #4252
加载图标,用于表示加载中的过渡状态。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-loading": "@vant/weapp/loading/index"\n}\n
<van-loading /> <van-loading type="spinner" />\n
<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />\n
<van-loading size="24px">加载中...</van-loading>\n
<van-loading size="24px" vertical>加载中...</van-loading>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | 颜色 | string | #c9c9c9 |
type | 类型,可选值为 spinner | string | circular |
size | 加载图标大小,默认单位为 px | string | number | 30px |
text-size v1.0.0 | 文字大小,默认单位为为 px | string | number | 14px |
vertical v1.0.0 | 是否垂直排列图标和文字内容 | boolean | false |
名称 | 说明 |
---|---|
- | 加载文案 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
为页面提供导航功能,常用于页面顶部。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-nav-bar": "@vant/weapp/nav-bar/index"\n}\n
<van-nav-bar\n title="标题"\n left-text="返回"\n right-text="按钮"\n left-arrow\n bind:click-left="onClickLeft"\n bind:click-right="onClickRight"\n/>\n
Page({\n onClickLeft() {\n wx.showToast({ title: '点击返回', icon: 'none' });\n },\n onClickRight() {\n wx.showToast({ title: '点击按钮', icon: 'none' });\n },\n});\n
通过 slot 定制内容。
<van-nav-bar title="标题" left-text="返回" left-arrow>\n <van-icon name="search" slot="right" />\n</van-nav-bar>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | '' |
left-text | 左侧文案 | string | '' |
right-text | 右侧文案 | string | '' |
left-arrow | 是否显示左侧箭头 | boolean | false |
fixed | 是否固定在顶部 | boolean | false |
placeholder | 固定在顶部时是否开启占位 | boolean | false |
border | 是否显示下边框 | boolean | true |
z-index | 元素 z-index | number | 1 |
custom-style | 根节点自定义样式 | string | - |
safe-area-inset-top | 是否留出顶部安全距离(状态栏高度) | boolean | true |
名称 | 说明 |
---|---|
title | 自定义标题 |
left | 自定义左侧区域内容 |
right | 自定义右侧区域内容 |
事件名 | 说明 | 参数 |
---|---|---|
bind:click-left | 点击左侧按钮时触发 | - |
bind:click-right | 点击右侧按钮时触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
title-class | 标题样式类 |
用于循环播放展示一组消息通知。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-notice-bar": "@vant/weapp/notice-bar/index"\n}\n
<van-notice-bar\n left-icon="volume-o"\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n
通知栏的内容长度溢出时会自动开启滚动播放,通过 scrollable
属性可以控制该行为。
<!-- 文字较短时,通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时,通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n scrollable="{{ false }}"\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n
文字较长时,可以通过设置 wrapable
属性来开启多行展示。
<van-notice-bar\n wrapable\n scrollable="{{ false }}"\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n
通知栏支持 closeable
和 link
两种模式。
<!-- closeable 模式,在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式,在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n
通过 color
属性设置文本颜色,通过 background
属性设置背景色。
<van-notice-bar\n color="#1989fa"\n background="#ecf9ff"\n left-icon="info-o"\n text="技术是开发它的人的共同灵魂。"\n/>\n
使用speed
属性控制滚动速率。
<van-notice-bar\n text="{{ text }}"\n speed="{{speedValue}}"\n left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"\n/>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 通知栏模式,可选值为 closeable link | string | '' |
text | 通知文本内容 | string | '' |
color | 通知文本颜色 | string | #ed6a0c |
background | 滚动条背景 | string | #fffbe8 |
left-icon | 左侧图标名称或图片链接 | string | - |
delay | 动画延迟时间 (ms) | number | 1 |
speed | 滚动速率 (px/s) | number | 60 |
scrollable | 是否开启滚动播放,内容长度溢出时默认开启 | boolean | - |
wrapable | 是否开启文本换行,只在禁用滚动时生效 | boolean | false |
open-type | 微信开放能力 | string | navigate |
事件名 | 说明 | 参数 |
---|---|---|
click | 点击通知栏时触发 | event: Event |
close | 关闭通知栏时触发 | event: Event |
名称 | 说明 |
---|---|
- | 通知文本内容,仅在 text 属性为空时有效 |
left-icon | 自定义左侧图标 |
right-icon | 自定义右侧图标 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
–notice-bar-height | 40px | - |
–notice-bar-padding | 0 var(–van-padding-md) | - |
–notice-bar-wrapable-padding | var(–van-padding-xs) var(–van-padding-md) | - |
–notice-bar-text-color | var(–van-orange-dark) | - |
–notice-bar-font-size | var(–van-font-size-md) | - |
–notice-bar-line-height | 24px | - |
–notice-bar-background-color | var(–van-orange-light) | - |
–notice-bar-icon-size | 16px | - |
–notice-bar-icon-min-width | 24px | - |
在页面顶部展示消息提示,支持函数调用和组件调用两种方式。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-notify": "@vant/weapp/notify/index"\n}\n
import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n
支持primary
、success
、warning
、danger
四种通知类型,默认为danger
。
// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n
自定义消息通知的颜色和展示时长。
Notify({\n message: '自定义颜色',\n color: '#ad0000',\n background: '#ffe1e1',\n});\n\nNotify({\n message: '自定义时长',\n duration: 1000,\n});\n
Notify({\n message: '自定义节点选择器',\n duration: 1000,\n selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
Notify | 展示提示 | options | message | notify 实例 |
Notify.clear | 关闭提示 | options | void |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type v1.0.0 | 类型,可选值为 primary success warning | string | danger |
message v1.0.0 | 展示文案,支持通过\\n 换行 | string | '' |
duration | 展示时长(ms),值为 0 时,notify 不会消失 | number | 3000 |
selector | 自定义节点选择器 | string | van-notify |
color | 字体颜色 | string | #fff |
top | 顶部距离 | number | 0 |
background | 背景颜色 | string | - |
context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | object | 当前页面 |
onClick | 点击时的回调函数 | Function | - |
onOpened | 完全展示后的回调函数 | Function | - |
onClose | 关闭时的回调函数 | Function | - |
safeAreaInsetTop | 是否留出顶部安全距离(状态栏高度) | boolean | false |
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-overlay": "@vant/weapp/overlay/index"\n}\n
<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n data: {\n show: false,\n },\n\n onClickShow() {\n this.setData({ show: true });\n },\n\n onClickHide() {\n this.setData({ show: false });\n },\n});\n
通过默认插槽可以在遮罩层上嵌入任意内容。
<van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide">\n <view class="wrapper">\n <view class="block" catch:tap="noop" />\n </view>\n</van-overlay>\n
Page({\n data: {\n show: false,\n },\n\n onClickShow() {\n this.setData({ show: true });\n },\n\n onClickHide() {\n this.setData({ show: false });\n },\n\n noop() {},\n});\n
.wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n}\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否展示遮罩层 | boolean | false |
z-index | z-index 层级 | string | number | 1 |
duration | 动画时长,单位秒 | string | number | 0.3 |
class-name | 自定义类名 | string | - |
custom-style | 自定义样式 | string | - |
lock-scroll v1.7.3 | 是否锁定背景滚动,锁定时蒙层里的内容也将无法滚动 | boolean | true |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:click | 点击时触发 | - |
名称 | 说明 |
---|---|
- | 默认插槽,用于在遮罩层上方嵌入内容 |
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-panel": "@vant/weapp/panel/index"\n}\n
面板只是一个容器,里面可以放入自定义的内容。
<van-panel title="标题" desc="描述信息" status="状态">\n <view>内容</view>\n</van-panel>\n
使用slot
自定义内容。
<van-panel title="标题" desc="描述信息" status="状态">\n <view>内容</view>\n <view slot="footer">\n <van-button size="small">按钮</van-button>\n <van-button size="small" type="danger">按钮</van-button>\n </view>\n</van-panel>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | - |
desc | 描述 | string | - |
status | 状态 | string | - |
名称 | 说明 |
---|---|
- | 自定义内容 |
header | 自定义 header,如果设置了title 、desc 、status 属性则不生效 |
footer | 自定义 footer |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
header-class | 头部样式类 |
footer-class | 底部样式类 |
提供多个选项集合供用户选择,支持单列选择和多列级联,通常与 弹出层 组件配合使用。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-picker": "@vant/weapp/picker/index"\n}\n
<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n data: {\n columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n },\n\n onChange(event) {\n const { picker, value, index } = event.detail;\n Toast(`当前值:${value}, 当前索引:${index}`);\n },\n});\n
单列选择器可以直接通过default-index
属性设置初始选中项的索引值。
<van-picker\n columns="{{ columns }}"\n default-index="{{ 2 }}"\n bind:change="onChange"\n/>\n
<van-picker\n show-toolbar\n title="标题"\n columns="{{ columns }}"\n bind:cancel="onCancel"\n bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n data: {\n columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n },\n\n onConfirm(event) {\n const { picker, value, index } = event.detail;\n Toast(`当前值:${value}, 当前索引:${index}`);\n },\n\n onCancel() {\n Toast('取消');\n },\n});\n
<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n 福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n data: {\n columns: [\n {\n values: Object.keys(citys),\n className: 'column1',\n },\n {\n values: citys['浙江'],\n className: 'column2',\n defaultIndex: 2,\n },\n ],\n },\n\n onChange(event) {\n const { picker, value, index } = event.detail;\n picker.setColumnValues(1, citys[value[0]]);\n },\n});\n
选项可以为对象结构,通过设置 disabled 来禁用该选项。
<van-picker columns="{{ columns }}" />\n
Page({\n data: {\n columns: [\n { text: '杭州', disabled: true },\n { text: '宁波' },\n { text: '温州' },\n ],\n },\n});\n
当 Picker 数据是通过异步获取时,可以通过 loading
属性显示加载提示。
<van-picker columns="{{ columns }}" loading />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
columns | 对象数组,配置每一列显示的数据 | Array | [] |
show-toolbar | 是否显示顶部栏 | boolean | false |
toolbar-position | 顶部栏位置,可选值为bottom | string | top |
title | 顶部栏标题 | string | '' |
loading | 是否显示加载状态 | boolean | false |
value-key | 选项对象中,文字对应的 key | string | text |
item-height | 选项高度 | number | 44 |
confirm-button-text | 确认按钮文字 | string | 确认 |
cancel-button-text | 取消按钮文字 | string | 取消 |
visible-item-count | 可见的选项个数 | number | 6 |
default-index | 单列选择器的默认选中项索引, 多列选择器请参考下方的 Columns 配置 | number | 0 |
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。
事件名 | 说明 | 参数 |
---|---|---|
confirm | 点击完成按钮时触发 | 单列:选中值,选中值对应的索引 多列:所有列选中值,所有列选中值对应的索引 |
cancel | 点击取消按钮时触发 | 单列:选中值,选中值对应的索引 多列:所有列选中值,所有列选中值对应的索引 |
change | 选项改变时触发 | 单列:Picker 实例,选中值,选中值对应的索引 多列:Picker 实例,所有列选中值,当前列对应的索引 |
当传入多列数据时,columns
为一个对象数组,数组中的每一个对象配置每一列,每一列有以下key
。
key | 说明 |
---|---|
values | 列中对应的备选值 |
defaultIndex | 初始选中项的索引,默认为 0 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
active-class | 选中项样式类 |
toolbar-class | 顶部栏样式类 |
column-class | 列样式类 |
通过 selectComponent 可以获取到 picker 实例并调用实例方法。
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
getValues | - | values | 获取所有列选中的值 |
setValues | values | - | 设置所有列选中的值 |
getIndexes | - | indexes | 获取所有列选中值对应的索引 |
setIndexes | indexes | - | 设置所有列选中值对应的索引 |
getColumnValue | columnIndex | value | 获取对应列选中的值 |
setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
getColumnValues | columnIndex | values | 获取对应列中所有选项 |
setColumnValues | columnIndex, values | - | 设置对应列中所有选项 |
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-popup": "@vant/weapp/popup/index"\n}\n
通过show
属性控制弹出层是否展示。
<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n data: {\n show: false,\n },\n\n showPopup() {\n this.setData({ show: true });\n },\n\n onClose() {\n this.setData({ show: false });\n },\n});\n
通过position
属性设置弹出位置,默认居中弹出,可以设置为top
、bottom
、left
、right
。
<van-popup\n show="{{ show }}"\n position="top"\n custom-style="height: 20%;"\n bind:close="onClose"\n/>\n
设置closeable
属性后,会在弹出层的右上角显示关闭图标,并且可以通过close-icon
属性自定义图标,使用close-icon-position
属性可以自定义图标位置。
<van-popup\n show="{{ show }}"\n closeable\n position="bottom"\n custom-style="height: 20%"\n bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n show="{{ show }}"\n closeable\n close-icon="close"\n position="bottom"\n custom-style="height: 20%"\n bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n show="{{ show }}"\n closeable\n close-icon-position="top-left"\n position="bottom"\n custom-style="height: 20%"\n bind:close="onClose"\n/>\n
设置round
属性后,弹窗会根据弹出位置添加不同的圆角样式。
<van-popup\n show="{{ show }}"\n round\n position="bottom"\n custom-style="height: 20%"\n bind:close="onClose"\n/>\n
使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。
目前,组件可以通过 lock-scroll
属性处理部分滚动穿透问题。 但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。 不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:
当小程序基础库最低版本在 2.9.0 以上时,即可使用 page-meta 组件动态修改页面样式
<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示弹出层 | boolean | false |
z-index | z-index 层级 | number | 100 |
overlay | 是否显示遮罩层 | boolean | true |
position | 弹出位置,可选值为 top bottom right left | string | center |
duration | 动画时长,单位为毫秒 | number | object | 300 |
round | 是否显示圆角 | boolean | false |
custom-style | 自定义弹出层样式 | string | '' |
overlay-style | 自定义遮罩层样式 | string | '' |
close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | true |
closeable | 是否显示关闭图标 | boolean | false |
close-icon | 关闭图标名称或图片链接 | string | cross |
safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
safe-area-inset-top | 是否留出顶部安全距离(状态栏高度) | boolean | false |
lock-scroll v1.7.3 | 是否锁定背景滚动 | boolean | true |
事件名 | 说明 | 参数 |
---|---|---|
bind:close | 关闭弹出层时触发 | - |
bind:click-overlay | 点击遮罩层时触发 | - |
bind:before-enter | 进入前触发 | - |
bind:enter | 进入中触发 | - |
bind:after-enter | 进入后触发 | - |
bind:before-leave | 离开前触发 | - |
bind:leave | 离开中触发 | - |
bind:after-leave | 离开后触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
用于展示操作的当前进度。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-progress": "@vant/weapp/progress/index"\n}\n
进度条默认为蓝色,使用percentage
属性来设置当前进度。
<van-progress percentage="50" />\n
通过stroke-width
可以设置进度条的粗细。
<van-progress :percentage="50" stroke-width="8" />\n
设置inactive
属性后进度条将置灰。
<van-progress inactive percentage="50" />\n
可以使用pivot-text
属性自定义文字,color
属性自定义进度条颜色。
<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n percentage="75"\n pivot-text="紫色"\n pivot-color="#7232dd"\n color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
inactive | 是否置灰 | boolean | false |
percentage | 进度百分比 | number | 0 |
stroke-width | 进度条粗细,默认单位为px | string | number | 4px |
show-pivot | 是否显示进度文字 | boolean | true |
color | 进度条颜色 | string | #1989fa |
text-color | 进度文字颜色 | string | #fff |
track-color | 轨道颜色 | string | #e5e5e5 |
pivot-text | 文字显示 | string | 百分比文字 |
pivot-color | 文字背景色 | string | 与进度条颜色一致 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
在一组备选项中进行单选。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-radio": "@vant/weapp/radio/index",\n "van-radio-group": "@vant/weapp/radio-group/index"\n}\n
通过value
绑定值当前选中项的 name 。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio name="1">单选框 1</van-radio>\n <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n
Page({\n data: {\n radio: '1',\n },\n\n onChange(event) {\n this.setData({\n radio: event.detail,\n });\n },\n});\n
将direction
属性设置为horizontal
后,单选框组会变成水平排列。
<van-radio-group\n value="{{ radio }}"\n bind:change="onChange"\n direction="horizontal"\n>\n <van-radio name="1">单选框 1</van-radio>\n <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n
通过disabled
属性禁止选项切换,在Radio
上设置diabled
可以禁用单个选项。
<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n <van-radio name="1">单选框 1</van-radio>\n <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n
将shape
属性设置为square
,单选框的形状会变成方形。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio name="1" shape="square">单选框 1</van-radio>\n <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n
通过checked-color
属性设置选中状态的图标颜色。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n
通过icon-size
属性可以自定义图标的大小。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n
通过icon
插槽自定义图标,需要设置use-icon-slot
属性。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio use-icon-slot value="{{ radio }}" name="1">\n 自定义图标\n <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />\n </van-radio>\n <van-radio use-icon-slot value="{{ radio }}" name="2">\n 自定义图标\n <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />\n </van-radio>\n</van-radio-group>\n
Page({\n data: {\n radio: true,\n icon: {\n normal: '//img.yzcdn.cn/icon-normal.png',\n active: '//img.yzcdn.cn/icon-active.png',\n },\n },\n onChange(event) {\n this.setData({\n radio: event.detail,\n });\n },\n});\n
通过设置label-disabled
属性可以禁用单选框文本点击。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-radio name="1" label-disabled>单选框 1</van-radio>\n <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n
此时你需要再引入Cell
和CellGroup
组件。
<van-radio-group value="{{ radio }}" bind:change="onChange">\n <van-cell-group>\n <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">\n <van-radio slot="right-icon" name="1" />\n </van-cell>\n <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">\n <van-radio slot="right-icon" name="2" />\n </van-cell>\n </van-cell-group>\n</van-radio-group>\n
Page({\n data: {\n radio: '1',\n },\n\n onChange(event) {\n this.setData({\n radio: event.detail,\n });\n },\n\n onClick(event) {\n const { name } = event.currentTarget.dataset;\n this.setData({\n radio: name,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
value | 当前选中项的标识符 | any | - |
disabled | 是否禁用所有单选框 | boolean | false |
direction v1.6.7 | 排列方向,可选值为 horizontal | string | vertical |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标识符 | string | - |
shape | 形状,可选值为 square | string | round |
disabled | 是否为禁用状态 | boolean | false |
label-disabled | 是否禁用文本内容点击 | boolean | false |
label-position | 文本位置,可选值为 left | string | right |
icon-size | 图标大小,默认单位为px | string | number | 20px |
checked-color | 选中状态颜色 | string | #1989fa |
use-icon-slot | 是否使用 icon 插槽 | boolean | false |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:change | 当绑定值变化时触发的事件 | 当前选中项的 name |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
icon-class | 图标样式类 |
label-class | 描述信息样式类 |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:change | 当绑定值变化时触发的事件 | 当前选中项的 name |
用于对事物进行评级操作。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-rate": "@vant/weapp/rate/index"\n}\n
<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n data: {\n value: 3,\n },\n\n onChange(event) {\n this.setData({\n value: event.detail,\n });\n },\n});\n
<van-rate\n value="{{ value }}"\n icon="like"\n void-icon="like-o"\n bind:change="onChange"\n/>\n
<van-rate\n value="{{ value }}"\n size="{{ 25 }}"\n color="#ffd21e"\n void-icon="star"\n void-color="#eee"\n bind:change="onChange"\n/>\n
<van-rate\n value="{{ value }}"\n allow-half\n void-icon="star"\n void-color="#eee"\n bind:change="onChange"\n/>\n
Page({\n data: {\n value: 2.5,\n },\n\n onChange(event) {\n this.setData({\n value: event.detail,\n });\n },\n});\n
<van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />\n
<van-rate disabled value="{{ value }}" bind:change="onChange" />\n
<van-rate readonly value="{{ value }}" bind:change="onChange" />\n
评分变化时,会触发 change
事件。
<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n data: {\n value: 2,\n },\n\n onChange(event) {\n Toast('当前值:' + event.detail);\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
value | 当前分值 | number | - |
count | 图标总数 | number | 5 |
size | 图标大小,默认单位为 px | string | number | 20px |
gutter | 图标间距,默认单位为 px | string | number | 4px |
color | 选中时的颜色 | string | #ffd21e |
void-color | 未选中时的颜色 | string | #c7c7c7 |
icon | 选中时的图标名称或图片链接,可选值见 Icon 组件 | string | star |
void-icon | 未选中时的图标名称或图片链接,可选值见 Icon 组件 | string | star-o |
allow-half | 是否允许半选 | boolean | false |
readonly | 是否为只读状态 \b | boolean | false |
disabled | 是否禁用评分 | boolean | false |
disabled-color | 禁用时的颜色 | string | #bdbdbd |
touchable | 是否可以通过滑动手势选择评分 | boolean | true |
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 当前分值变化时触发的事件 | event.detail:当前分值 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
icon-class | 图标样式类 |
用于搜索场景的输入框组件。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-search": "@vant/weapp/search/index"\n}\n
van-search
中,value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n
van-search
提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
<van-search\n value="{{ value }}"\n placeholder="请输入搜索关键词"\n show-action\n bind:search="onSearch"\n bind:cancel="onCancel"\n/>\n
通过 input-align
属性可以设置搜索框内容的对齐方式。
<van-search\n value="{{ value }}"\n input-align="center"\n placeholder="请输入搜索关键词"\n/>\n
通过 disabled
属性可以将组件设置为禁用状态。
<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n
通过background
属性可以设置搜索框外部的背景色,通过shape
属性设置搜索框的形状,可选值为round
。
<van-search\n value="{{ value }}"\n shape="round"\n background="#4fc08d"\n placeholder="请输入搜索关键词"\n/>\n
van-search
支持自定义右侧取消按钮,使用名字为 action 的 slot,并设置 use-action-slot 为 true 即可。
<van-search\n value="{{ value }}"\n label="地址"\n placeholder="请输入搜索关键词"\n use-action-slot\n bind:change="onChange"\n bind:search="onSearch"\n>\n <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n data: {\n value: '',\n },\n onChange(e) {\n this.setData({\n value: e.detail,\n });\n },\n onSearch() {\n Toast('搜索' + this.data.value);\n },\n onClick() {\n Toast('搜索' + this.data.value);\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
label | 搜索框左侧文本 | string | - |
shape | 形状,可选值为 round | string | square |
value | 当前输入的值 | string | number | - |
background | 搜索框背景色 | string | #f2f2f2 |
show-action | 是否在搜索框右侧显示取消按钮 | boolean | false |
action-text v1.0.0 | 取消按钮文字 | string | 取消 |
focus | 获取焦点 | boolean | false |
error | 是否将输入内容标红 | boolean | false |
disabled | 是否禁用输入框 | boolean | false |
readonly | 是否只读 | boolean | false |
clearable | 是否启用清除控件 | boolean | true |
clear-trigger v1.8.4 | 显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 | string | focus |
clear-icon v1.8.4 | 清除图标名称或图片链接 | string | clear |
maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | number | -1 |
use-action-slot | 是否使用 action slot | boolean | false |
placeholder | 输入框为空时占位符 | string | - |
placeholder-style | 指定占位符的样式 | string | - |
input-align | 输入框内容对齐方式,可选值为 center right | string | left |
use-left-icon-slot | 是否使用输入框左侧图标 slot | boolean | false |
use-right-icon-slot | 是否使用输入框右侧图标 slot | boolean | false |
left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-left-icon-slot,则该属性无效) | string | search |
right-icon | 输入框右侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-right-icon-slot,则该属性无效) | string | - |
事件名 | 说明 | 参数 |
---|---|---|
bind:search | 确定搜索时触发 | event.detail: 当前输入值 |
bind:change | 输入内容变化时触发 | event.detail: 当前输入值 |
bind:cancel | 取消搜索搜索时触发 | - |
bind:focus | 输入框聚焦时触发 | - |
bind:blur | 输入框失焦时触发 | - |
bind:clear | 点击清空控件时触发 | - |
bind:click-input | 点击搜索区域时触发 | - |
名称 | 说明 |
---|---|
action | 自定义搜索框右侧按钮,需要在use-action-slot 为 true 时才会显示 |
label | 自定义搜索框左侧文本 |
left-icon | 自定义输入框左侧图标,需要在use-left-icon-slot 为 true 时才会显示 |
right-icon | 自定义输入框右侧图标,需要在use-right-icon-slot 为 true 时才会显示 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
field-class | 搜索框样式类 |
input-class | 输入框样式类 |
cancel-class | 取消按钮样式类 |
底部弹起的分享面板,用于展示各分享渠道对应的操作按钮,不含具体的分享逻辑。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n
分享面板通过 options
属性来定义分享选项,数组的每一项是一个对象,对象格式见文档下方表格。
<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n show="{{ showShare }}"\n title="立即分享给好友"\n options="{{ options }}"\n bind:select="onSelect"\n bind:close="onClose"\n/>\n
Page({\n data: {\n showShare: false,\n options: [\n { name: '微信', icon: 'wechat', openType: 'share' },\n { name: '微博', icon: 'weibo' },\n { name: '复制链接', icon: 'link' },\n { name: '分享海报', icon: 'poster' },\n { name: '二维码', icon: 'qrcode' },\n ],\n },\n\n onClick(event) {\n this.setData({ showShare: true });\n },\n\n onClose() {\n this.setData({ showShare: false });\n },\n\n onSelect(event) {\n Toast(event.detail.name);\n this.onClose();\n },\n});\n
当分享选项的数量较多时,可以将 options
定义为数组嵌套的格式,每个子数组会作为一行选项展示。
<van-share-sheet\n show="{{ showShare }}"\n title="立即分享给好友"\n options="{{ options }}"\n/>\n
Page({\n data: {\n showShare: false,\n options: [\n [\n { name: '微信', icon: 'wechat' },\n { name: '微博', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: '复制链接', icon: 'link' },\n { name: '分享海报', icon: 'poster' },\n { name: '二维码', icon: 'qrcode' },\n ],\n ],\n },\n});\n
除了使用内置的几种图标外,可以直接在 icon
中传入图片 URL 来使用自定义的图标。
<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n data: {\n showShare: false,\n options: [\n {\n name: '名称',\n icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n },\n {\n name: '名称',\n icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n },\n {\n name: '名称',\n icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n },\n ],\n },\n});\n
通过 description
属性可以设置标题下方的描述文字, 在 options
内设置 description
属性可以添加分享选项描述。
<van-share-sheet\n show="{{ showShare }}"\n options="{{ options }}"\n title="立即分享给好友"\n description="描述信息"\n/>\n
Page({\n data: {\n showShare: false,\n options: [\n { name: '微信', icon: 'wechat' },\n { name: '微博', icon: 'weibo' },\n {\n name: '复制链接',\n icon: 'link',\n description: '描述信息',\n },\n { name: '分享海报', icon: 'poster' },\n { name: '二维码', icon: 'qrcode' },\n ],\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 分享选项 | Option[] | [] |
title | 顶部标题 | string | - |
cancel-text | 取消按钮文字 | string | '取消' |
description | 标题下方的辅助描述文字 | string | - |
duration | 动画时长,单位毫秒 | number | string | 300 |
overlay | 是否显示遮罩层 | boolean | true |
close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | true |
safe-area-inset-bottom | 是否开启底部安全区适配 | boolean | true |
options
属性为一个对象数组,数组中的每个对象配置一列,对象可以包含以下值:
键名 | 说明 | 类型 |
---|---|---|
name | 分享渠道名称 | string |
description | 分享选项描述 | string |
icon | 图标,可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments ,支持传入图片 URL | string |
openType | 按钮 open-type ,可用于实现分享功能,可选值为 share | string |
事件名 | 说明 | 回调参数 |
---|---|---|
select | 点击分享选项时触发 | option: Option, index: number |
close | 关闭时触发 | - |
cancel | 点击取消按钮时触发 | - |
click-overlay | 点击遮罩层时触发 | - |
名称 | 说明 |
---|---|
title | 自定义顶部标题 |
description | 自定义描述文字 |
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-sidebar": "@vant/weapp/sidebar/index",\n "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
通过在van-sidebar
上设置activeKey
属性来控制选中项。
<van-sidebar active-key="{{ activeKey }}">\n <van-sidebar-item title="标签名" />\n <van-sidebar-item title="标签名" />\n <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n data: {\n activeKey: 0,\n },\n});\n
设置dot
属性后,会在右上角展示一个小红点。设置badge
属性后,会在右上角展示相应的徽标。
<van-sidebar active-key="{{ activeKey }}">\n <van-sidebar-item title="标签名" dot />\n <van-sidebar-item title="标签名" badge="5" />\n <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n
通过disabled
属性禁用选项。
<van-sidebar active-key="{{ activeKey }}">\n <van-sidebar-item title="标签名" />\n <van-sidebar-item title="标签名" disabled />\n <van-sidebar-item title="标签名" />\n</van-sidebar>\n
设置change
方法来监听切换导航项时的事件。
<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n <van-sidebar-item title="标签名 1" />\n <van-sidebar-item title="标签名 2" />\n <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n data: {\n activeKey: 0,\n },\n\n onChange(event) {\n Notify({ type: 'primary', message: event.detail });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
activeKey | 选中项的索引 | string | number | 0 |
事件名 | 说明 | 参数 |
---|---|---|
change | 切换徽章时触发 | 当前选中徽章的索引 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 内容 | string | '' |
dot | 是否显示右上角小红点 | boolean | false |
info | 图标右上角徽标的内容(已废弃,请使用 badge 属性) | string | number | '' |
badge v1.5.0 | 图标右上角徽标的内容 | string | number | '' |
disabled | 是否禁用该项 | boolean | false |
名称 | 说明 |
---|---|
title | 自定义标题栏,如果设置了title 属性则不生效 |
事件名 | 说明 | 参数 |
---|---|---|
click | 点击徽章时触发 | event.detail 为当前徽章的索引 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
用于在内容加载过程中展示一组占位图形。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-skeleton": "@vant/weapp/skeleton/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
通过title
属性显示标题占位图,通过row
属性配置占位段落行数。
<van-skeleton title row="3" />\n
通过avatar
属性显示头像占位图。
<van-skeleton title avatar row="3" />\n
将loading
属性设置成false
表示内容加载完成,此时会隐藏占位图,并显示Skeleton
的子组件。
<van-skeleton title avatar row="3" loading="{{ loading }}">\n <view>实际内容</view>\n</van-skeleton>\n
Page({\n data: {\n loading: true,\n },\n onReady() {\n this.setData({\n loading: false,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
row | 段落占位图行数 | number | 0 |
row-width | 段落占位图宽度,可传数组来设置每一行的宽度 | string | string[] | 100% |
title | 是否显示标题占位图 | boolean | false |
title-width | 标题占位图宽度 | string | number | 40% |
avatar | 是否显示头像占位图 | boolean | false |
avatar-size | 头像占位图大小 | string | number | 32px |
avatar-shape | 头像占位图形状,可选值为square | string | round |
loading | 是否显示占位图,传false 时会展示子组件内容 | boolean | true |
animate | 是否开启动画 | boolean | true |
滑动输入条,用于在给定的范围内选择一个值。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-slider": "@vant/weapp/slider/index"\n}\n
<van-slider value="50" bind:change="onChange" />\n
Page({\n onChange(event) {\n wx.showToast({\n icon: 'none',\n title: `当前值:${event.detail}`,\n });\n },\n});\n
添加 range
属性就可以开启双滑块模式,确保 value
的值是一个数组。
<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n onChange(event) {\n wx.showToast({\n icon: 'none',\n title: `当前值:${event.detail}`,\n });\n },\n});\n
<van-slider min="-50" max="50" />\n
<van-slider value="50" disabled />\n
<van-slider value="50" step="10" />\n
<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n
<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n data: {\n currentValue: 50,\n },\n\n onDrag(event) {\n this.setData({\n currentValue: event.detail.value,\n });\n },\n});\n
设置 vertical
属性后,滑块会垂直展示,且高度为 100% 父元素高度。
<view style="height: 150px;">\n <van-slider value="50" vertical bind:change="onChange" />\n <van-slider\n value="{{ [10, 50] }}"\n range\n vertical\n style="margin-left: 100px;"\n bind:change="onChange"\n />\n</view>\n
Page({\n onChange(event) {\n wx.showToast({\n icon: 'none',\n title: `当前值:${event.detail}`,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前进度百分比,在双滑块模式下为数组格式 | number | number[] | 0 |
disabled | 是否禁用滑块 | boolean | false |
max | 最大值 | number | 100 |
min | 最小值 | number | 0 |
step | 步长 | number | 1 |
bar-height | 进度条高度,默认单位为 px | string | number | 2px |
active-color | 进度条激活态颜色 | string | #1989fa |
inactive-color | 进度条默认颜色 | string | #e5e5e5 |
use-slot-button | 是否使用按钮插槽 | boolean | false |
range v1.8.4 | 是否开启双滑块模式 | boolean | false |
vertical v1.8.5 | 是否垂直展示 | boolean | false |
事件名 | 说明 | 参数 |
---|---|---|
bind:drag | 拖动进度条时触发 | event.detail.value: 当前进度 |
bind:change | 进度值改变后触发 | event.detail: 当前进度 |
bind:drag-start | 开始拖动时触发 | - |
bind:drag-end | 结束拖动时触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
名称 | 说明 | 参数 |
---|---|---|
button | 自定义滑块按钮 | { value: number } |
left-button v1.8.4 | 自定义左侧滑块按钮(双滑块模式下) | { value: number } |
right-button v1.8.4 | 自定义右侧滑块按钮 (双滑块模式下) | { value: number } |
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-stepper": "@vant/weapp/stepper/index"\n}\n
通过value
设置输入值,可以通过change
事件监听到输入值的变化。
<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n onChange(event) {\n console.log(event.detail);\n },\n});\n
通过step
属性设置每次点击增加或减少按钮时变化的值,默认为1
。
<van-stepper value="{{ 1 }}" step="2" />\n
通过min
和max
属性限制输入值的范围。
<van-stepper value="{{ 5 }}" min="5" max="8" />\n
设置integer
属性后,输入框将限制只能输入整数。
<van-stepper value="{{ 1 }}" integer />\n
通过设置disabled
属性来禁用步进器,禁用状态下无法点击按钮或修改输入框。
<van-stepper value="{{ 1 }}" disabled />\n
通过设置long-press
属性决定步进器是否开启长按手势。
<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n
通过设置decimal-length
属性可以保留固定的小数位数。
<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n
如果需要异步地修改输入框的值,可以设置async-change
属性,并在change
事件中手动修改value
。
<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n data: {\n value: 1,\n },\n\n onChange(value) {\n Toast.loading({ forbidClick: true });\n\n setTimeout(() => {\n Toast.clear();\n this.setData({ value });\n }, 500);\n },\n});\n
通过input-width
属性设置输入框宽度,通过button-size
属性设置按钮大小和输入框高度。
<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
value | 输入值 | string | number | 最小值 |
min | 最小值 | string | number | 1 |
max | 最大值 | string | number | - |
step | 步长 | string | number | 1 |
integer | 是否只允许输入整数 | boolean | false |
disabled | 是否禁用 | boolean | false |
disable-input | 是否禁用输入框 | boolean | false |
async-change | 是否开启异步变更,开启后需要手动控制输入值 | boolean | false |
input-width | 输入框宽度,默认单位为 px | string | number | 32px |
button-size | 按钮大小,默认单位为 px ,输入框高度会和按钮大小保持一致 | string | number | 28px |
show-plus | 是否显示增加按钮 | boolean | true |
show-minus | 是否显示减少按钮 | boolean | true |
decimal-length | 固定显示的小数位数 | number | - |
theme | 样式风格,可选值为 round | string | - |
disable-plus | 是否禁用增加按钮 | boolean | - |
disable-minus | 是否禁用减少按钮 | boolean | - |
long-press | 是否开启长按手势 | boolean | true |
always-embed v1.9.3 | 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | boolean | false |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
bind:overlimit | 点击不可用的按钮时触发 | - |
bind:plus | 点击增加按钮时触发 | - |
bind:minus | 点击减少按钮时触发 | - |
bind:focus | 输入框聚焦时触发 | - |
bind:blur | 输入框失焦时触发 | - |
名称 | 说明 |
---|---|
plus | 加号按钮 |
minus | 减号按钮 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
input-class | 输入框样式类 |
plus-class | 加号按钮样式类 |
minus-class | 减号按钮样式类 |
用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-steps": "@vant/weapp/steps/index"\n}\n
<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n data: {\n steps: [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n },\n ],\n },\n});\n
可以通过 active-icon
和 active-color
属性设置激活状态下的图标和颜色。
<van-steps\n steps="{{ steps }}"\n active="{{ active }}"\n active-icon="success"\n active-color="#38f"\n/>\n
可以通过 inactiveIcon
和 activeIcon
属性分别设置每一项的图标。
<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n data: {\n steps: [\n {\n text: '步骤一',\n desc: '描述信息',\n inactiveIcon: 'location-o',\n activeIcon: 'success',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n inactiveIcon: 'like-o',\n activeIcon: 'plus',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n inactiveIcon: 'star-o',\n activeIcon: 'cross',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n inactiveIcon: 'phone-o',\n activeIcon: 'fail',\n },\n ],\n },\n});\n
可以通过设置direction
属性来改变步骤条的显示方式。
<van-steps\n steps="{{ steps }}"\n active="{{ active }}"\n direction="vertical"\n active-color="#ee0a24"\n/>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 当前步骤 | number | 0 |
direction | 显示方向,可选值为 horizontal vertical | string | horizontal |
active-color | 激活状态颜色 | string | #07c160 |
inactive-color | 未激活状态颜色 | string | #969799 |
active-icon | 激活状态底部图标,可选值见 Icon 组件 | string | checked |
inactive-icon | 未激活状态底部图标,可选值见 Icon 组件 | string | - |
事件名称 | 说明 | 回调参数 |
---|---|---|
bind:click-step | 点击步骤时触发的事件 | event.detail:当前步骤的索引 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
desc-class | 描述信息样式类 |
Sticky 组件与 CSS 中position: sticky
属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-sticky": "@vant/weapp/sticky/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
将内容包裹在Sticky
组件内即可。
<van-sticky>\n <van-button type="primary">基础用法</van-button>\n</van-sticky>\n
通过offset-top
属性可以设置组件在吸顶时与顶部的距离。
<van-sticky offset-top="{{ 50 }}">\n <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n
通过container
属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会返回原位置。
<view id="container" style="height: 150px;">\n <van-sticky container="{{ container }}">\n <van-button type="warning">指定容器</van-button>\n </van-sticky>\n</view>\n
Page({\n data: {\n container: null,\n },\n\n onReady() {\n this.setData({\n container: () => wx.createSelectorQuery().select('#container'),\n });\n },\n});\n
通过 scroll-top
与 offset-top
属性可以实现在 scroll-view 内嵌套使用。
<scroll-view\n bind:scroll="onScroll"\n scroll-y\n id="scroller"\n style="height: 200px;"\n>\n <view style="height: 400px; padding-top: 50px;">\n <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n <van-button type="warning">嵌套在 scroll-view 内</van-button>\n </van-sticky>\n </view>\n</scroll-view>\n
Page({\n data: {\n scrollTop: 0,\n offsetTop: 0,\n },\n\n onScroll(event) {\n wx.createSelectorQuery()\n .select('#scroller')\n .boundingClientRect((res) => {\n this.setData({\n scrollTop: event.detail.scrollTop,\n offsetTop: res.top,\n });\n })\n .exec();\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
offset-top | 吸顶时与顶部的距离,单位px | number | 0 |
z-index | 吸顶时的 z-index | number | 99 |
container | 一个函数,返回容器对应的 NodesRef 节点 | function | - |
scroll-top | 当前滚动区域的滚动位置,非 null 时会禁用页面滚动事件的监听 | number | - |
事件名 | 说明 | 回调参数 |
---|---|---|
scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
用于展示订单金额与提交订单。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n
<van-submit-bar\n price="{{ 3050 }}"\n button-text="提交订单"\n bind:submit="onSubmit"\n/>\n
禁用状态下不会触发submit
事件。
<van-submit-bar\n disabled\n price="{{ 3050 }}"\n button-text="提交订单"\n tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n tip-icon="info-o"\n bind:submit="onSubmit"\n/>\n
加载状态下不会触发submit
事件。
<van-submit-bar\n loading\n price="{{ 3050 }}"\n button-text="提交订单"\n bind:submit="onSubmit"\n/>\n
通过插槽插入自定义内容。
<van-submit-bar\n price="{{ 3050 }}"\n button-text="提交订单"\n bind:submit="onClickButton"\n tip="{{ true }}"\n>\n <van-tag type="primary">标签</van-tag>\n <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
price | 价格(单位分) | number | - |
label | 价格文案 | string | 合计: |
suffix-label | 价格右侧文案 | string | - |
button-text | 按钮文字 | string | - |
button-type | 按钮类型 | string | danger |
tip | 提示文案 | string | boolean | - |
tip-icon | 图标名称或图片链接,可选值见 Icon 组件 | string | - |
disabled | 是否禁用按钮 | boolean | false |
loading | 是否显示加载中的按钮 | boolean | false |
currency | 货币符号 | string | ¥ |
safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
decimal-length | 价格小数点后位数 | number | 2 |
事件名 | 说明 | 参数 |
---|---|---|
submit | 按钮点击事件回调 | - |
名称 | 说明 |
---|---|
- | 自定义订单栏左侧内容 |
top | 自定义订单栏上方内容 |
tip | 提示文案中的额外操作和说明 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
price-class | 价格样式类 |
button-class | 按钮样式类 |
bar-class | 订单栏样式类 |
可以左右滑动来展示操作按钮的单元格组件。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n
<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n <view slot="left">选择</view>\n <van-cell-group>\n <van-cell title="单元格" value="内容" />\n </van-cell-group>\n <view slot="right">删除</view>\n</van-swipe-cell>\n
当开启async-close
时, 通过绑定close
事件,可以自定义两侧滑动内容点击时的关闭行为。
<van-swipe-cell\n id="swipe-cell"\n right-width="{{ 65 }}"\n left-width="{{ 65 }}"\n async-close\n bind:close="onClose"\n>\n <view slot="left">选择</view>\n <van-cell-group>\n <van-cell title="单元格" value="内容" />\n </van-cell-group>\n <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n onClose(event) {\n const { position, instance } = event.detail;\n switch (position) {\n case 'left':\n case 'cell':\n instance.close();\n break;\n case 'right':\n Dialog.confirm({\n message: '确定删除吗?',\n }).then(() => {\n instance.close();\n });\n break;\n }\n },\n});\n
<van-swipe-cell\n id="swipe-cell2"\n right-width="{{ 65 }}"\n left-width="{{ 65 }}"\n name="示例"\n bind:open="onOpen"\n>\n <view slot="left" class="van-swipe-cell__left">选择</view>\n <van-cell-group>\n <van-cell title="单元格" value="内容" />\n </van-cell-group>\n <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n onOpen(event) {\n const { position, name } = event.detail;\n switch (position) {\n case 'left':\n Notify({\n type: 'primary',\n message: `${name}${position}部分展示open事件被触发`,\n });\n break;\n case 'right':\n Notify({\n type: 'primary',\n message: `${name}${position}部分展示open事件被触发`,\n });\n break;\n }\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标识符,可以在 close 事件的参数中获取到 | string | number | - |
left-width | 左侧滑动区域宽度 | number | 0 |
right-width | 右侧滑动区域宽度 | number | 0 |
async-close | 是否异步关闭 | boolean | false |
disabled v1.3.4 | 是否禁用滑动 | boolean | false |
名称 | 说明 |
---|---|
- | 自定义显示内容 |
left | 左侧滑动内容 |
right | 右侧滑动内容 |
事件名 | 说明 | 参数 |
---|---|---|
click | 点击时触发 | 关闭时的点击位置 (left right cell outside ) |
close | 关闭时触发 | { position: ‘left’ | ‘right’ , instance , name: string } |
open | 打开时触发 | { position: ‘left’ | ‘right’ , name: string } |
参数 | 类型 | 说明 |
---|---|---|
position | string | 关闭时的点击位置 (left right cell outside ) |
instance | object | SwipeCell 实例 |
name | 标识符 | string |
通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
open | position: left | right | - | 打开单元格侧边栏 |
close | - | - | 收起单元格侧边栏 |
用于在打开和关闭状态之间进行切换。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-switch": "@vant/weapp/switch/index"\n}\n
<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n data: {\n checked: true,\n },\n\n onChange({ detail }) {\n // 需要手动对 checked 状态进行更新\n this.setData({ checked: detail });\n },\n});\n
<van-switch checked="{{ checked }}" disabled />\n
<van-switch checked="{{ checked }}" loading />\n
<van-switch checked="{{ checked }}" size="24px" />\n
<van-switch\n checked="{{ checked }}"\n active-color="#07c160"\n inactive-color="#ee0a24"\n/>\n
<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n data: {\n checked: true,\n },\n\n onChange({ detail }) {\n wx.showModal({\n title: '提示',\n content: '是否切换开关?',\n success: (res) => {\n if (res.confirm) {\n this.setData({ checked2: detail });\n }\n },\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 在表单内提交时的标识符 | string | - |
checked | 开关选中状态 | any | false |
loading | 是否为加载状态 | boolean | false |
disabled | 是否为禁用状态 | boolean | false |
size | 开关尺寸 | string | 30px |
active-color | 打开时的背景色 | string | #1989fa |
inactive-color | 关闭时的背景色 | string | #fff |
active-value | 打开时的值 | any | true |
inactive-value | 关闭时的值 | any | false |
事件名 | 说明 | 参数 |
---|---|---|
bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
node-class | 圆点样式类 |
选项卡组件,用于在不同的内容区域之间进行切换。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-tab": "@vant/weapp/tab/index",\n "van-tabs": "@vant/weapp/tabs/index"\n}\n
通过active
设定当前激活标签对应的索引值,默认情况下启用第一个标签。
<van-tabs active="{{ active }}" bind:change="onChange">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n data: {\n active: 1,\n },\n\n onChange(event) {\n wx.showToast({\n title: `切换到标签 ${event.detail.name}`,\n icon: 'none',\n });\n },\n});\n
在标签指定name
属性的情况下,active
的值为当前标签的name
(此时无法通过索引值来匹配标签)。
<van-tabs active="a">\n <van-tab title="标签 1" name="a">内容 1</van-tab>\n <van-tab title="标签 2" name="b">内容 2</van-tab>\n <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n
多于 5 个标签时,Tab 可以横向滚动。
<van-tabs active="{{ active }}">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n <van-tab title="标签 5">内容 5</van-tab>\n <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n
设置disabled
属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在van-tabs
上监听disabled
事件。
<van-tabs bind:disabled="onClickDisabled">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2" disabled>内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n onClickDisabled(event) {\n wx.showToast({\n title: `标签 ${event.detail.name} 已被禁用`,\n icon: 'none',\n });\n },\n});\n
Tab
支持两种样式风格:line
和card
,默认为line
样式,可以通过type
属性修改样式风格。
<van-tabs type="card">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
可以在van-tabs
上绑定click
事件,在回调参数的event.detail
中可以取得被点击标签的标题和标识符。
<van-tabs bind:click="onClick">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n onClick(event) {\n wx.showToast({\n title: `点击标签 ${event.detail.name}`,\n icon: 'none',\n });\n },\n});\n
通过sticky
属性可以开启粘性布局,粘性布局下,当 Tab 滚动到顶部时会自动吸顶。
<van-tabs sticky>\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
可以通过animated
来设置是否启用切换 tab 时的动画。
<van-tabs animated>\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
通过swipeable
属性可以开启滑动切换标签页。
<van-tabs swipeable>\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内,当 van-tabs 显示时下划线将不会正常显示。
此时可以通过使用 wx:if
手动控制 van-tabs 的渲染来规避这种场景。
<van-popup show="{{ show }}">\n <van-tabs wx:if="{{ show }}">\n <van-tab title="标签 1">内容 1</van-tab>\n <van-tab title="标签 2">内容 2</van-tab>\n <van-tab title="标签 3">内容 3</van-tab>\n <van-tab title="标签 4">内容 4</van-tab>\n </van-tabs>\n</van-popup>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 样式风格,可选值为card | string | line |
color | 标签主题色 | string | #ee0a24 |
active | 当前选中标签的标识符 | string | number | 0 |
duration | 动画时间,单位秒 | number | 0.3 |
line-width | 底部条宽度,默认单位px | string | number | 40px |
line-height | 底部条高度,默认单位px | string | number | 3px |
animated | 是否开启切换标签内容时的转场动画 | boolean | false |
border | 是否展示外边框,仅在 line 风格下生效 | boolean | false |
ellipsis | 是否省略过长的标题文字 | boolean | true |
sticky | 是否使用粘性定位布局 | boolean | false |
swipeable | 是否开启手势滑动切换 | boolean | false |
lazy-render | 是否开启标签页内容延迟渲染 | boolean | true |
offset-top | 粘性定位布局下与顶部的最小距离,单位px | number | - |
swipe-threshold | 滚动阈值,标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | number | 5 |
title-active-color | 标题选中态颜色 | string | - |
title-inactive-color | 标题默认态颜色 | string | - |
z-index | z-index 层级 | number | 1 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标签名称,作为匹配的标识符 | string | number | 标签的索引值 |
title | 标题 | string | - |
disabled | 是否禁用标签 | boolean | false |
dot | 是否显示小红点 | boolean | - |
info | 图标右上角提示信息 | string | number | - |
title-style | 自定义标题样式 | string | - |
名称 | 说明 |
---|---|
nav-left | 标题左侧内容 |
nav-right | 标题右侧内容 |
名称 | 说明 |
---|---|
- | 标签页内容 |
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击标签时触发 | name:标签标识符,title:标题 |
bind:change | 当前激活的标签改变时触发 | name:标签标识符,title:标题 |
bind:disabled | 点击被禁用的标签时触发 | name:标签标识符,title:标题 |
bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
nav-class | 标签栏样式类 |
tab-class | 标签样式类 |
tab-active-class | 标签激活态样式类 |
通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
resize | - | - | 外层元素大小或组件显示状态变化时,可以调用此方法来触发重绘 |
Tabs 组件在挂载时,会获取自身的宽度,并计算出底部条的位置。如果组件一开始处于隐藏状态,则获取到的宽度永远为 0,因此无法展示底部条位置。
方法一,使用 wx:if
来控制组件展示,使组件重新初始化。
<van-tabs wx:if="show" />\n
方法二,调用组件的 resize 方法来主动触发重绘。
<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
底部导航栏,用于在不同页面之间进行切换。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-tabbar": "@vant/weapp/tabbar/index",\n "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n
<van-tabbar active="{{ active }}" bind:change="onChange">\n <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n <van-tabbar-item icon="search">标签</van-tabbar-item>\n <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n data: {\n active: 0,\n },\n onChange(event) {\n // event.detail 的值为当前选中项的索引\n this.setData({ active: event.detail });\n },\n});\n
在标签指定name
属性的情况下,v-model
的值为当前标签的name
。
<van-tabbar active="{{ active }}" bind:change="onChange">\n <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n data: {\n active: 'home',\n },\n onChange(event) {\n this.setData({ active: event.detail });\n },\n});\n
<van-tabbar active="{{ active }}" bind:change="onChange">\n <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n
可以通过 slot 自定义图标,其中 icon slot 代表未选中状态下的图标,icon-active slot 代表选中状态下的图标。
<van-tabbar active="{{ active }}" bind:change="onChange">\n <van-tabbar-item info="3">\n <image\n slot="icon"\n src="{{ icon.normal }}"\n mode="aspectFit"\n style="width: 30px; height: 18px;"\n />\n <image\n slot="icon-active"\n src="{{ icon.active }}"\n mode="aspectFit"\n style="width: 30px; height: 18px;"\n />\n 自定义\n </van-tabbar-item>\n <van-tabbar-item icon="search">标签</van-tabbar-item>\n <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n data: {\n active: 0,\n icon: {\n normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n active: 'https://img.yzcdn.cn/vant/user-active.png',\n },\n },\n onChange(event) {\n this.setData({ active: event.detail });\n },\n});\n
<van-tabbar\n active="{{ active }}"\n active-color="#07c160"\n inactive-color="#000"\n bind:change="onChange"\n>\n <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n <van-tabbar-item icon="search">标签</van-tabbar-item>\n <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n data: {\n active: 0,\n },\n onChange(event) {\n this.setData({ active: event.detail });\n },\n});\n
<van-tabbar active="{{ active }}" bind:change="onChange">\n <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n <van-tabbar-item icon="search">标签2</van-tabbar-item>\n <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n data: {\n active: 0,\n },\n onClick(event) {\n wx.showToast({\n title: `点击标签 ${event.detail + 1}`,\n icon: 'none',\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 当前选中标签的索引 | number | - |
fixed | 是否固定在底部 | boolean | true |
placeholder | 固定在底部时,是否在标签位置生成一个等高的占位元素 | boolean | false |
border | 是否展示外边框 | boolean | true |
z-index | 元素 z-index | number | 1 |
active-color | 选中标签的颜色 | string | #1989fa |
inactive-color | 未选中标签的颜色 | string | #7d7e80 |
safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
事件名 | 说明 | 参数 |
---|---|---|
bind:change | 切换标签时触发 | event.detail: 当前选中标签的名称或索引值 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标签名称,作为匹配的标识符 | string | number | 当前标签的索引值 |
icon | 图标名称或图片链接,可选值见 Icon 组件 | string | - |
icon-prefix | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | van-icon |
dot | 是否显示小红点 | boolean | - |
info | 图标右上角提示信息 | string | number | - |
名称 | 说明 |
---|---|
icon | 未选中时的图标 |
icon-active | 选中时的图标 |
用于标记关键词和概括主要内容。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-tag": "@vant/weapp/tag/index"\n}\n
通过 type
属性控制标签颜色,默认为灰色。
<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n
设置 plain
属性设置为空心样式。
<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n
通过 round
设置为圆角样式。
<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n
通过 mark
设置为标记样式(半圆角)。
<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n
<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n
<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n
添加 closeable
属性表示标签是可关闭的,关闭标签时会触发 close
事件,在 close
事件中可以执行隐藏标签的逻辑。
<van-tag\n wx:if="{{ show.primary }}"\n closeable\n size="medium"\n type="primary"\n id="primary"\n bind:close="onClose"\n>\n 标签\n</van-tag>\n<van-tag\n wx:if="{{ show.success }}"\n closeable\n size="medium"\n type="success"\n id="success"\n bind:close="onClose"\n>\n 标签\n</van-tag>\n
Page({\n data: {\n show: {\n primary: true,\n success: true,\n },\n },\n onClose(event) {\n this.setData({\n [`show.${event.target.id}`]: false,\n });\n },\n});\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型,可选值为 primary success danger warning | string | - |
size | 大小, 可选值为 large medium | string | - |
color | 标签颜色 | string | - |
plain | 是否为空心样式 | boolean | false |
round | 是否为圆角样式 | boolean | false |
mark | 是否为标记样式 | boolean | false |
text-color | 文本颜色,优先级高于 color 属性 | string | white |
closeable | 是否为可关闭标签 | boolean | false |
名称 | 说明 |
---|---|
- | 自定义 Tag 显示内容 |
事件名 | 说明 | 回调参数 |
---|---|---|
close | 关闭标签时触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-toast": "@vant/weapp/toast/index"\n}\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案,建议不超过十五字~');\n
<van-toast id="van-toast" />\n
使用 Toast.loading
方法展示加载提示,通过 forbidClick
属性可以禁用背景点击,通过 loadingType
属性可以自定义加载图标类型。
Toast.loading({\n message: '加载中...',\n forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n message: '加载中...',\n forbidClick: true,\n loadingType: 'spinner',\n});\n
Toast.success('成功文案');\nToast.fail('失败文案');\n
const toast = Toast.loading({\n duration: 0, // 持续展示 toast\n forbidClick: true,\n message: '倒计时 3 秒',\n selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.setData({\n message: `倒计时 ${second} 秒`,\n });\n } else {\n clearInterval(timer);\n Toast.clear();\n }\n}, 1000);\n
<van-toast id="custom-selector" />\n
Toast({\n type: 'success',\n message: '提交成功',\n onClose: () => {\n console.log('执行OnClose函数');\n },\n});\n
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Toast | options | message | toast 实例 | 展示提示 |
Toast.loading | options | message | toast 实例 | 展示加载提示 |
Toast.success | options | message | toast 实例 | 展示成功提示 |
Toast.fail | options | message | toast 实例 | 展示失败提示 |
Toast.clear | clearAll | void | 关闭提示 |
Toast.setDefaultOptions | options | void | 修改默认配置,对所有 Toast 生效 |
Toast.resetDefaultOptions | - | void | 重置默认配置,对所有 Toast 生效 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 提示类型,可选值为 loading success fail html | string | text |
position | 位置,可选值为 top middle bottom | string | middle |
message | 内容 | string | '' |
mask | 是否显示遮罩层 | boolean | false |
forbidClick | 是否禁止背景点击 | boolean | false |
loadingType | 加载图标类型, 可选值为 spinner | string | circular |
zIndex | z-index 层级 | number | 1000 |
duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 |
selector | 自定义选择器 | string | van-toast |
context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | object | 当前页面 |
onClose | 关闭时的回调函数 | Function | - |
名称 | 说明 |
---|---|
- | 自定义内容 |
使元素从一种样式逐渐变化为另一种样式的效果。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-transition": "@vant/weapp/transition/index"\n}\n
将元素包裹在 transition 组件内,在元素展示/隐藏时,会有相应的过渡动画。
<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n
transition 组件内置了多种动画,可以通过name
字段指定动画类型。
<van-transition name="fade-up" />\n
可以通过外部样式类自定义过渡效果,还可以定制进入和移出的持续时间。
<van-transition\n show="{{ show }}"\n name=""\n duration="{{ { enter: 300, leave: 1000 } }}"\n enter-class="van-enter-class"\n enter-active-class="van-enter-active-class"\n leave-active-class="van-leave-active-class"\n leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n background-color: red;\n transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 动画类型 | string | fade |
show | 是否展示组件 | boolean | true |
duration | 动画时长,单位为毫秒 | number | object | 300 |
custom-style | 自定义样式 | string | - |
事件名 | 说明 | 参数 |
---|---|---|
bind:before-enter | 进入前触发 | - |
bind:enter | 进入中触发 | - |
bind:after-enter | 进入后触发 | - |
bind:before-leave | 离开前触发 | - |
bind:leave | 离开中触发 | - |
bind:after-leave | 离开后触发 | - |
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
enter-class | 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 |
enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 |
enter-to-class | 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除),在过渡/动画完成之后移除。 |
leave-class | 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 |
leave-active-class | 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。 |
leave-to-class | 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除),在过渡/动画完成之后移除。 |
名称 | 说明 |
---|---|
fade | 淡入 |
fade-up | 上滑淡入 |
fade-down | 下滑淡入 |
fade-left | 左滑淡入 |
fade-right | 右滑淡入 |
slide-up | 上滑进入 |
slide-down | 下滑进入 |
slide-left | 左滑进入 |
slide-right | 右滑进入 |
用于从一组相关联的数据集合中进行选择。
在app.json
或index.json
中引入组件,详细介绍见快速上手。
"usingComponents": {\n "van-tree-select": "@vant/weapp/tree-select/index"\n}\n
可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选,具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值,当 active-id 为数组时即为多选状态。
<van-tree-select\n items="{{ items }}"\n main-active-index="{{ mainActiveIndex }}"\n active-id="{{ activeId }}"\n bind:click-nav="onClickNav"\n bind:click-item="onClickItem"\n/>\n
Page({\n data: {\n mainActiveIndex: 0,\n activeId: null,\n },\n\n onClickNav({ detail = {} }) {\n this.setData({\n mainActiveIndex: detail.index || 0,\n });\n },\n\n onClickItem({ detail = {} }) {\n const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n this.setData({ activeId });\n },\n});\n
<van-tree-select\n items="{{ items }}"\n main-active-index="{{ mainActiveIndex }}"\n active-id="{{ activeId }}"\n max="{{ max }}"\n bind:click-nav="onClickNav"\n bind:click-item="onClickItem"\n/>\n
Page({\n data: {\n mainActiveIndex: 0,\n activeId: [],\n max: 2,\n },\n\n onClickNav({ detail = {} }) {\n this.setData({\n mainActiveIndex: detail.index || 0,\n });\n },\n\n onClickItem({ detail = {} }) {\n const { activeId } = this.data;\n\n const index = activeId.indexOf(detail.id);\n if (index > -1) {\n activeId.splice(index, 1);\n } else {\n activeId.push(detail.id);\n }\n\n this.setData({ activeId });\n },\n});\n
<van-tree-select\n items="{{ items }}"\n height="55vw"\n main-active-index="{{ mainActiveIndex }}"\n active-id="{{ activeId }}"\n bind:click-nav="onClickNav"\n bind:click-item="onClickItem"\n>\n <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
items | 分类显示所需的数据 | Array | [] |
height | 高度,默认单位为px | number | string | 300 |
main-active-index | 左侧选中项的索引 | number | 0 |
active-id | 右侧选中项的 id,支持传入数组 | string | number | Array | 0 |
max | 右侧项最大选中个数 | number | Infinity |
selected-icon v1.5.0 | 自定义右侧栏选中状态的图标 | string | success |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:click-nav | 左侧导航点击时,触发的事件 | event.detail.index:被点击的导航的索引 |
bind:click-item | 右侧选择项被点击时,会触发的事件 | event.detail: 该点击项的数据 |
名称 | 说明 |
---|---|
content | 自定义右侧区域内容,如果存在 items,则插入在顶部 |
items
整体为一个数组,数组内包含一系列描述分类的对象。每个分类里,text 表示当前分类的名称。children 表示分类里的可选项,为数组结构,id 被用来唯一标识每个选项。
[\n {\n // 导航名称\n text: '所有城市',\n // 导航名称右上角徽标,1.5.0 版本开始支持\n badge: 3,\n // 是否在导航名称右上角显示小红点,1.5.0 版本开始支持\n dot: true,\n // 禁用选项\n disabled: false,\n // 该导航下所有的可选项\n children: [\n {\n // 名称\n text: '温州',\n // id,作为匹配选中状态的标识\n id: 1,\n // 禁用选项\n disabled: true,\n },\n {\n text: '杭州',\n id: 2,\n },\n ],\n },\n];\n
类名 | 说明 |
---|---|
main-item-class | 左侧选项样式类 |
content-item-class | 右侧选项样式类 |
main-active-class | 左侧选项选中样式类 |
content-active-class | 右侧选项选中样式类 |
main-disabled-class | 左侧选项禁用样式类 |
content-disabled-class | 右侧选项禁用样式类 |
用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑,该步骤需要自行实现。
在app.json
或index.json
中引入组件,默认为ES6
版本,ES5
引入方式参见快速上手。
"usingComponents": {\n "van-uploader": "@vant/weapp/uploader/index"\n}\n
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
文件上传完毕后会触发after-read
回调函数,获取到对应的文件的临时地址,然后再使用wx.uploadFile
将图片上传到远程服务器上。
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n data: {\n fileList: [],\n },\n\n afterRead(event) {\n const { file } = event.detail;\n // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式\n wx.uploadFile({\n url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址\n filePath: file.url,\n name: 'file',\n formData: { user: 'test' },\n success(res) {\n // 上传完成需要更新 fileList\n const { fileList = [] } = this.data;\n fileList.push({ ...file, url: res.data });\n this.setData({ fileList });\n },\n });\n },\n});\n
通过向组件传入file-list
属性,可以绑定已经上传的图片列表,并展示图片列表的预览图。file-list 的详细结构可见下方。
<van-uploader file-list="{{ fileList }}" />\n
Page({\n data: {\n fileList: [\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n name: '图片1',\n },\n // Uploader 根据文件后缀来判断是否为图片文件\n // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明\n {\n url: 'http://iph.href.lu/60x60?text=default',\n name: '图片2',\n isImage: true,\n deletable: true,\n },\n ],\n },\n});\n
通过deletable
属性可控制是否开启所有图片的可删除状态,deletable
默认为true
,即所有图片都可删除。
若希望控制单张图片的可删除状态,可将deletable
属性设置为true
,并在fileList
中为每一项设置deletable
属性。
<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n data: {\n fileList: [\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n deletable: false,\n },\n ],\n },\n});\n
通过status
属性可以标识上传状态,uploading
表示上传中,failed
表示上传失败,done
表示上传完成。
<van-uploader file-list="{{ fileList }}" />\n
Page({\n data: {\n fileList: [\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n status: 'uploading',\n message: '上传中',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n status: 'failed',\n message: '上传失败',\n },\n ],\n },\n});\n
通过max-count
属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域。
<van-uploader\n file-list="{{ fileList }}"\n max-count="2"\n bind:after-read="afterRead"\n/>\n
通过插槽可以自定义上传区域的样式。
<van-uploader>\n <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n
将use-before-read
属性设置为true
,然后绑定 before-read
事件可以在上传前进行校验,调用 callback
方法传入 true
表示校验通过,传入 false
表示校验失败。
<van-uploader\n file-list="{{ fileList }}"\n accept="media"\n use-before-read\n bind:before-read="beforeRead"\n bind:after-read="afterRead"\n/>\n
Page({\n data: {\n fileList: [],\n },\n\n beforeRead(event) {\n const { file, callback } = event.detail;\n callback(file.type === 'image');\n },\n});\n
在开发中,可以利用小程序云开发的云存储能力,将图片上传至云存储内。然后根据返回的fileiId
来下载图片、删除图片和替换临时链接。
// 上传图片\nuploadToCloud() {\n wx.cloud.init();\n const { fileList } = this.data;\n if (!fileList.length) {\n wx.showToast({ title: '请选择图片', icon: 'none' });\n } else {\n const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n Promise.all(uploadTasks)\n .then(data => {\n wx.showToast({ title: '上传成功', icon: 'none' });\n const newFileList = data.map(item => ({ url: item.fileID }));\n this.setData({ cloudPath: data, fileList: newFileList });\n })\n .catch(e => {\n wx.showToast({ title: '上传失败', icon: 'none' });\n console.log(e);\n });\n }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n return wx.cloud.uploadFile({\n cloudPath: fileName,\n filePath: chooseResult.url\n });\n}\n
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标识符,可以在回调函数的第二项参数中获取 | string | number | - |
accept | 接受的文件类型, 可选值为all media image file video | string | image |
sizeType | 所选的图片的尺寸, 当accept 为image 类型时设置所选图片的尺寸可选值为original compressed | string[] | ['original','compressed'] |
preview-size | 预览图和上传区域的尺寸,默认单位为px | string | number | 80px |
preview-image | 是否在上传完成后展示预览图 | boolean | true |
preview-full-image | 是否在点击预览图后展示全屏图片预览 | boolean | true |
multiple | 是否开启图片多选,部分安卓机型不支持 | boolean | false |
disabled | 是否禁用文件上传 | boolean | false |
show-upload | 是否展示文件上传按钮 | boolean | true |
deletable | 是否展示删除按钮 | boolean | true |
capture | 图片或者视频选取模式,当accept 为image 类型时设置capture 可选值为camera 可以直接调起摄像头 | string | string[] | ['album', 'camera'] |
max-size | 文件大小限制,单位为byte | number | - |
max-count | 文件上传数量限制 | number | - |
upload-text | 上传区域文字提示 | string | - |
image-fit | 预览图裁剪模式,可选值参考小程序image 组件的mode 属性 | string | scaleToFill |
use-before-read | 是否开启文件读取前事件 | boolean | - |
camera | 当 accept 为 video 时生效,可选值为 back front | string | - |
compressed | 当 accept 为 video 时生效,是否压缩视频,默认为true | boolean | - |
max-duration | 当 accept 为 video 时生效,拍摄视频最长拍摄时间,单位秒 | number | - |
upload-icon | 上传区域图标,可选值见 Icon 组件 | string | plus |
参数 | 说明 |
---|---|
media | 图片和视频 |
image | 图片 |
video | 视频 |
file | 从客户端会话选择图片和视频以外的文件 |
all | 从客户端会话选择所有文件 |
file-list
为一个对象数组,数组中的每一个对象包含以下 key
。
参数 | 说明 |
---|---|
url | 图片和视频的网络资源地址 |
name | 文件名称,视频将在全屏预览时作为标题显示 |
thumb | 图片缩略图或视频封面的网络资源地址,仅对图片和视频有效 |
type | 文件类型,可选值image video file |
isImage | 手动标记图片资源 |
isVideo | 手动标记视频资源 |
名称 | 说明 |
---|---|
- | 自定义上传区域 |
事件名 | 说明 | 回调参数 |
---|---|---|
bind:before-read | 文件读取前,在回调函数中返回 false 可终止文件读取,绑定事件的同时需要将use-before-read 属性设置为true | event.detail.file : 当前读取的文件,event.detail.callback : 回调函数,调用callback(false) 终止文件读取 |
bind:after-read | 文件读取完成后 | event.detail.file : 当前读取的文件 |
bind:oversize | 文件超出大小限制 | - |
bind:click-preview | 点击预览图片 | event.detail.index : 点击图片的序号值 |
bind:delete | 删除图片 | event.detail.index : 删除图片的序号值 |
2022-01-04
Bug Fixes
Document
Feature
2021-12-21
Bug Fixes
Document
Feature
2021-10-28
Bug Fixes
Feature
2021-09-29
Bug Fixes
Document
Feature
2021-09-27
Bug Fixes
Document
Feature
Performance
2021-09-07
Bug Fixes
Features
2021-08-30
Bug Fixes
Features
Performance Improvements
2021-08-18
Feature
Bug Fixes
2021-08-11
Feature
Performance
2021-07-19
Bug Fixes
Features
2021-07-04
Bug Fixes
weapp-qrcode
wechat-moments
#4256Features
Improvements
2021-05-22
Bug Fixes
Features
2021-02-26
Features
Bug Fixes
Improvements
2021-01-21
Features
Bug Fixes
Improvements
2021-01-19
Features
Bug Fixes
Improvements
2020-12-18
Improvements
Bug Fixes
max
min
\u65F6\u6ED1\u52A8\u4E0D\u5747\u5300 (#3876)2020-12-09
Features
beforeClose
\u5C5E\u6027 (#3815)county_list
\u6570\u636E (#3824)resize
\u65B9\u6CD5 (#3827)Improvements
Bug Fixes
percentage
\u4E3A 0 \u65F6\u6837\u5F0F\u5F02\u5E38 (#3808)2020-11-29
Features
placeholder
icon-prefix
\u5C5E\u6027 (#3792)Bug Fixes
type=year-month
\u65F6\u9009\u62E9\u51FA\u73B0\u62A5\u9519 (#3783)ellipsis
\u4E3A false
\u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u4E0D\u6B63\u786E (#3777)Improvements
2020-11-11
Features
custom-class
#3678Bug Fixes
label
\u5C5E\u6027\u65F6 label-class
\u6837\u5F0F\u7C7B\u4E0D\u751F\u6548 #3729scrollable
\u4E0D\u751F\u6548 #37272020-10-15
Features
Bug Fixes
2020-09-29
Features
origin-price
tag
\u63D2\u69FD #3645Bug Fixes
2020-08-27
Features
Bug Fixes
2020-07-28
Features
Bug Fixes
2020-07-17
Features
Bug Fixes
2020-06-24
Features
Bug Fixes
2020-06-04
Features
Bug Fixes
square
\u65F6\u6A2A\u3001\u7EB5\u5411\u95F4\u8DDD\u4E0D\u540C #3231type="2d"
\u4E0D\u751F\u6548 #32282020-05-24
Features
Bug Fixes
2020-05-08
1.3.0 \u4E2D\uFF0C\u6211\u4EEC\u4E3A\u6570\u4E2A\u8868\u5355\u7EC4\u4EF6\u652F\u6301\u4E86\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A\uFF0C\u6D89\u53CA\u7EC4\u4EF6\u6709
Slider #3107
Search #3106
Rate #3105
Features
Bug Fixes
2020-04-21
Features
Bug Fixes
2020-04-12
Features
Bug Fixes
2020-04-04
Features
Bug Fixes
2020-03-21
Features
Bug Fixes
2020-03-04
Features
popupStyle
\u5C5E\u6027 #2804open
close
opened
closed
\u4E8B\u4EF6 #2804price
num
\u63D2\u69FD #2787origin-price-class
\u5916\u90E8\u6837\u5F0F\u7C7B #2787Bug Fixes
name
\u7C7B\u578B\u4E0Evalue
\u7EDF\u4E00 #28012020-02-24
Features
Bug Fixes
close
\u4E8B\u4EF6 #2766disabled
\u5C5E\u6027\u65E0\u6548 #2748label-disabled
\u6587\u6863\u9519\u8BEF #27632020-02-07
Features
disabled
\u65F6\u7684\u7EC4\u4EF6\u6837\u5F0F #2720Bug Fixes
disabled
\u5C5E\u6027\u4E0D\u751F\u6548 #2711animated
\u5C5E\u6027\u65E0\u6CD5\u52A8\u6001\u5207\u6362 #2712size
\u5C5E\u6027\u4E0D\u652F\u6301string
\u7C7B\u578B #26942020-01-21
Features
Bug Fixes
2020-01-09
Features
Bug Fixes
2019-12-31
Features
row-class``avatar-class``title-class
#2612width
\u5C5E\u6027 #2607camera``compressed``maxDuration
\u5C5E\u6027 #2584Improvements
Bug Fixes
2019-12-23
Features
Improvements
Bug Fixes
2019-12-11
CSS\u81EA\u5B9A\u4E49\u5C5E\u6027
\u81EA\u5B9A\u4E49\u6837\u5F0Fenv()
\u91CD\u6784 iOS \u5B89\u5168\u533A\u57DF\u9002\u914D\u5728 Vant Weapp 1.0 \u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 11 \u4E2A\u5B9E\u7528\u7684\u57FA\u7840\u7EC4\u4EF6\uFF1A
position: sticky
\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u7C7B\u4F3C\u5728 1.0 \u8FED\u4EE3\u8BA1\u5212\u786E\u5B9A\u4E4B\u521D\uFF0C\u6211\u4EEC\u5C31\u4E0D\u65AD\u601D\u8003\u8FD9\u6837\u4E00\u4E2A\u95EE\u9898 -- \u8BE5\u5982\u4F55\u7ED9\u7528\u6237\u63D0\u4F9B\u52A8\u6001\u5207\u6362\u4E3B\u9898\u6837\u5F0F\u7684\u529F\u80FD\u5462\uFF1F
\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u662F\u975E\u5E38\u7279\u6B8A\u7684\u3002\u4E0D\u5177\u6709\u52A8\u6001\u52A0\u8F7D\u4EE3\u7801\u7684\u673A\u5236\uFF0C\u540C\u65F6\u5FAE\u4FE1\u53C8\u9650\u5236\u4E86\u4EE3\u7801\u7684\u4E3B\u5305\u5927\u5C0F\u548C\u603B\u5927\u5C0F\u3002\u4F20\u7EDF\u7684\u57FA\u4E8E\u9884\u8BBE\u7684\u6837\u5F0F\u5B9A\u5236\u8FC7\u4E8E\u81C3\u80BF\uFF0C\u4E0D\u518D\u9002\u5408\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u3002
\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684\u7EC4\u4EF6\u6A21\u578B\u76F8\u5F53\u4E8E\u4E00\u4E2A\u7B80\u5316\u7248\u7684 Shadow DOM\uFF0C\u5E78\u8FD0\u7684\u662F\uFF0C\u5C0F\u7A0B\u5E8F\u4E5F\u652F\u6301\u4E86 CSS \u81EA\u5B9A\u4E49\u5C5E\u6027 \u7684\u7279\u6027\u3002\u6700\u7EC8\uFF0C\u6211\u4EEC\u57FA\u4E8E CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\u8BBE\u8BA1\u4E86\u6837\u5F0F\u5B9A\u5236\u7684\u65B9\u6848\uFF0C\u5F00\u53D1\u8005\u4F7F\u7528\u7075\u6D3B\u3001\u65B9\u4FBF\uFF0C\u7EC4\u4EF6\u7EF4\u62A4\u4E5F\u66F4\u7B80\u5355\u3002
\u4ECE 1.0 \u7248\u672C\u5F00\u59CB\uFF0CVant Weapp \u4E2D\u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u652F\u6301\u901A\u8FC7 CSS \u7EC4\u5B9A\u4E49\u5C5E\u6027 \u8FDB\u884C\u6837\u5F0F\u5B9A\u5236\uFF0C\u5177\u4F53\u4F7F\u7528\u59FF\u52BF\u53EF\u67E5\u770B\u76F8\u5173\u6587\u6863
1.0 \u7248\u672C\u4E2D\u5305\u542B\u5C11\u91CF\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF0C\u4E3B\u8981\u662F\u547D\u540D\u8C03\u6574\u548C\u79FB\u9664\u4E2A\u522B\u5C5E\u6027\u3002\u5BF9\u4E8E\u6B63\u5728\u4F7F\u7528 0.x \u7248\u672C\u7684\u9879\u76EE\uFF0C\u8BF7\u6309\u7167\u4E0B\u65B9\u7684\u5217\u8868\u4F9D\u6B21\u68C0\u67E5\uFF0C\u5927\u90E8\u5206\u9879\u76EE\u53EF\u4EE5\u65E0\u75DB\u5347\u7EA7\u3002
BadgeGroup
\u91CD\u547D\u540D\u4E3ASidebar
Badge
\u91CD\u547D\u540D\u4E3ASlidebarItem
active
\u5C5E\u6027\u91CD\u547D\u540D\u4E3AactiveKey
text
\u9009\u9879\u91CD\u547D\u540D\u4E3Amessage
backgroundColor
\u9009\u9879\u91CD\u547D\u540D\u4E3Abackground
transitionend
\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6SwitchCell
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u4F7F\u7528Cell
\u548CSwitch
\u7EC4\u4EF6\u4EE3\u66FFtransitionend
\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6click-overlay
\u4E8B\u4EF6close-on-click-action
\u5C5E\u6027color
\u5C5E\u6027description
\u5C5E\u6027round
\u5C5E\u6027columns-placeholder
\u5C5E\u6027reset
\u65B9\u6CD5\u652F\u6301\u4F20\u5165code
\u53C2\u6570loading-type
\u5C5E\u6027color
\u5C5E\u6027\u652F\u6301\u6E10\u53D8\u8272disabled
\u65F6\u589E\u52A0\u8FC7\u6E21\u6548\u679Cicon-size
\u5C5E\u6027#ee0a24
filter
\u5C5E\u6027title
\u63D2\u69FDconfirm-button-color
\u5C5E\u6027cancel-button-color
\u5C5E\u6027width
\u5C5E\u6027overlay-style
\u5C5E\u6027clickable
\u5C5E\u6027arrow-direction
\u5C5E\u6027hold-keyboard
\u5C5E\u6027color
\u5C5E\u6027icon
\u63D2\u69FDdot
\u5C5E\u6027info
\u5C5E\u6027dot
\u5C5E\u6027dot
\u5C5E\u6027down
\u56FE\u6807wap-hone
\u5B9E\u5E95\u98CE\u683C\u56FE\u6807number
\u7C7B\u578B\u7684size
\u5C5E\u6027number
\u7C7B\u578B\u7684size
\u5C5E\u6027clear
\u65B9\u6CD5round
\u5C5E\u6027closeable
\u5C5E\u6027close-icon
\u5C5E\u6027close-icon-position
\u5C5E\u6027stroke-width
\u5C5E\u6027icon-size
\u5C5E\u6027gutter
\u5C5E\u6027touchable
\u5C5E\u6027string
\u7C7B\u578B\u7684size
\u5C5E\u6027action-text
\u5C5E\u6027left-icon
\u63D2\u69FDright-icon
\u63D2\u69FDdot
\u5C5E\u6027drag-start
\u4E8B\u4EF6drag-end
\u4E8B\u4EF6max
\u548Cmin
\u5C5E\u6027number
\u7C7B\u578B\u7684bar-height
\u5C5E\u6027name
\u5C5E\u6027open
\u4E8B\u4EF6input-width
\u5C5E\u6027button-size
\u5C5E\u6027decimalLength
\u5C5E\u6027active-icon
\u5C5E\u6027inactive-icon
\u5C5E\u6027name
\u5C5E\u6027line-height
\u5C5E\u6027ellipsis
\u5C5E\u6027lazy-render
\u5C5E\u6027line-width
\u5C5E\u6027\u652F\u6301String
\u7C7B\u578Bmax
\u5C5E\u6027content
\u63D2\u69FDVant Weapp \u57FA\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u673A\u5236\uFF0C\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4EE5\u4E0B 3 \u79CD\u4FEE\u6539\u7EC4\u4EF6\u6837\u5F0F\u7684\u65B9\u6CD5
\u6837\u5F0F\u9694\u79BB\u7684\u76F8\u5173\u80CC\u666F\u77E5\u8BC6\u8BF7\u67E5\u9605\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863
Vant Weapp \u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u5F00\u542F\u4E86addGlobalClass: true
\u4EE5\u63A5\u53D7\u5916\u90E8\u6837\u5F0F\u7684\u5F71\u54CD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5982\u4E0B 2 \u79CD\u65B9\u5F0F\u8986\u76D6\u7EC4\u4EF6\u6837\u5F0F
\u5728\u9875\u9762\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u76F4\u63A5\u5728\u9875\u9762\u7684\u6837\u5F0F\u6587\u4EF6\u4E2D\u8986\u76D6\u6837\u5F0F
<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
+
/* page.wxss */
+.van-button--primary {
+ font-size: 20px;
+ background-color: pink;
+}
+
\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u9700\u5F00\u542F
styleIsolation: 'shared'
\u9009\u9879
<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
+
Component({
+ options: {
+ styleIsolation: 'shared',
+ },
+});
+
.van-button--primary {
+ font-size: 20px;
+ background-color: pink;
+}
+
\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u76F8\u5173\u77E5\u8BC6\u80CC\u666F\u8BF7\u67E5\u9605\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863
Vant Weapp \u5F00\u653E\u4E86\u5927\u91CF\u7684\u5916\u90E8\u6837\u5F0F\u7C7B\u4F9B\u5F00\u53D1\u8005\u4F7F\u7528\uFF0C\u5177\u4F53\u7684\u6837\u5F0F\u7C7B\u540D\u79F0\u53EF\u67E5\u9605\u5BF9\u5E94\u7EC4\u4EF6\u7684\u201C\u5916\u90E8\u6837\u5F0F\u7C7B\u201D\u90E8\u5206\u3002
\u9700\u8981\u6CE8\u610F\u7684\u662F\u666E\u901A\u6837\u5F0F\u7C7B\u548C\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u662F\u672A\u5B9A\u4E49\u7684\uFF0C\u56E0\u6B64\u4F7F\u7528\u65F6\u8BF7\u6DFB\u52A0!important
\u4EE5\u4FDD\u8BC1\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u3002
<van-cell
+ title="\u5355\u5143\u683C"
+ value="\u5185\u5BB9"
+ title-class="cell-title"
+ value-class="cell-value"
+/>
+
.cell-title {
+ color: pink !important;
+ font-size: 20px !important;
+}
+
+.cell-value {
+ color: green !important;
+ font-size: 12px !important;
+}
+
Vant Weapp \u4E3A\u90E8\u5206 CSS \u5C5E\u6027\u5F00\u653E\u4E86\u57FA\u4E8E CSS \u5C5E\u6027\u7684\u5B9A\u5236\u65B9\u6848\u3002
\u76F8\u8F83\u4E8E \u89E3\u9664\u6837\u5F0F\u9694\u79BB \u548C \u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B\uFF0C\u8FD9\u79CD\u65B9\u6848\u652F\u6301\u5728\u9875\u9762\u6216\u5E94\u7528\u7EA7\u522B\u5BF9\u591A\u4E2A\u7EC4\u4EF6\u7684\u6837\u5F0F\u505A\u6279\u91CF\u4FEE\u6539\u4EE5\u8FDB\u884C\u4E3B\u9898\u6837\u5F0F\u7684\u5B9A\u5236\u3002
\u5F53\u7136\uFF0C\u7528\u5B83\u6765\u4FEE\u6539\u5355\u4E2A\u7EC4\u4EF6\u7684\u90E8\u5206\u6837\u5F0F\u4E5F\u662F\u7EF0\u7EF0\u6709\u4F59\u7684\u3002\u5177\u4F53\u7684\u4F7F\u7528\u65B9\u6CD5\u8BF7\u67E5\u9605\u5B9A\u5236\u4E3B\u9898
\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93
Vant \u662F\u6709\u8D5E\u524D\u7AEF\u56E2\u961F\u5F00\u6E90\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\uFF0C\u5DF2\u6301\u7EED\u7EF4\u62A4 4 \u5E74\u65F6\u95F4\u3002Vant \u5BF9\u5185\u627F\u8F7D\u4E86\u6709\u8D5E\u6240\u6709\u6838\u5FC3\u4E1A\u52A1\uFF0C\u5BF9\u5916\u670D\u52A1\u5341\u591A\u4E07\u5F00\u53D1\u8005\uFF0C\u662F\u4E1A\u754C\u4E3B\u6D41\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\u4E4B\u4E00\u3002
\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 Vue 2 \u7248\u672C\u3001Vue 3 \u7248\u672C\u548C\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 React \u7248\u672C\u548C\u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248\u672C\u3002
\u626B\u63CF\u4E0B\u65B9\u5C0F\u7A0B\u5E8F\u4E8C\u7EF4\u7801\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B\uFF1A
\u8BF7\u53C2\u8003 \u5FEB\u901F\u4E0A\u624B\u3002
\u4EE5\u4E0B\u662F Vant \u548C Vant Weapp \u7684\u6838\u5FC3\u8D21\u732E\u8005\u4EEC\uFF1A
chenjiahan | cookfront | wangnaiyi | pangxie | rex-zsd | nemo-shen | Lindysen | JakeLaoyu |
\u611F\u8C22\u4EE5\u4E0B\u5C0F\u4F19\u4F34\u4EEC\u4E3A Vant Weapp \u53D1\u5C55\u505A\u51FA\u7684\u8D21\u732E\uFF1A
\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 Issue \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 PR\u3002
\u672C\u9879\u76EE\u57FA\u4E8E MIT \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90\u3002
\u4F7F\u7528 Vant Weapp \u524D\uFF0C\u8BF7\u786E\u4FDD\u4F60\u5DF2\u7ECF\u5B66\u4E60\u8FC7\u5FAE\u4FE1\u5B98\u65B9\u7684 \u5C0F\u7A0B\u5E8F\u7B80\u6613\u6559\u7A0B \u548C \u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4ECB\u7ECD\u3002
\u4F7F\u7528 npm \u6784\u5EFA\u524D\uFF0C\u8BF7\u5148\u9605\u8BFB\u5FAE\u4FE1\u5B98\u65B9\u7684 npm \u652F\u6301
# \u901A\u8FC7 npm \u5B89\u88C5
+npm i @vant/weapp -S --production
+
+# \u901A\u8FC7 yarn \u5B89\u88C5
+yarn add @vant/weapp --production
+
+# \u5B89\u88C5 0.x \u7248\u672C
+npm i vant-weapp -S --production
+
\u5C06 app.json \u4E2D\u7684 "style": "v2"
\u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6\u5F3A\u884C\u52A0\u4E0A\u4E86\u8BB8\u591A\u6837\u5F0F\uFF0C\u96BE\u4EE5\u8986\u76D6\uFF0C\u4E0D\u5173\u95ED\u5C06\u9020\u6210\u90E8\u5206\u7EC4\u4EF6\u6837\u5F0F\u6DF7\u4E71\u3002
\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u9879\u76EE\uFF0CminiprogramRoot
\u9ED8\u8BA4\u4E3A miniprogram
\uFF0Cpackage.json
\u5728\u5176\u5916\u90E8\uFF0Cnpm \u6784\u5EFA\u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\u3002
\u9700\u8981\u624B\u52A8\u5728 project.config.json
\u5185\u6DFB\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4F7F\u5F00\u53D1\u8005\u5DE5\u5177\u53EF\u4EE5\u6B63\u786E\u7D22\u5F15\u5230 npm \u4F9D\u8D56\u7684\u4F4D\u7F6E\u3002
{
+ ...
+ "setting": {
+ ...
+ "packNpmManually": true,
+ "packNpmRelationList": [
+ {
+ "packageJsonPath": "./package.json",
+ "miniprogramNpmDistDir": "./miniprogram/"
+ }
+ ]
+ }
+}
+
\u6CE8\u610F\uFF1A \u7531\u4E8E\u76EE\u524D\u65B0\u7248\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u6587\u4EF6\u7ED3\u6784\u95EE\u9898\uFF0Cnpm\u6784\u5EFA\u7684\u6587\u4EF6\u76EE\u5F55\u4E3Aminiprogram_npm\uFF0C\u5E76\u4E14\u5F00\u53D1\u5DE5\u5177\u4F1A\u9ED8\u8BA4\u5728\u5F53\u524D\u76EE\u5F55\u4E0B\u521B\u5EFAminiprogram_npm\u7684\u6587\u4EF6\u540D\uFF0C\u6240\u4EE5\u65B0\u7248\u672C\u7684miniprogramNpmDistDir\u914D\u7F6E\u4E3A'./'\u5373\u53EF
\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB \u5DE5\u5177 -> \u6784\u5EFA npm\uFF0C\u5E76\u52FE\u9009 \u4F7F\u7528 npm \u6A21\u5757 \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002
\u5982\u679C\u4F60\u4F7F\u7528 typescript \u5F00\u53D1\u5C0F\u7A0B\u5E8F\uFF0C\u8FD8\u9700\u8981\u505A\u5982\u4E0B\u64CD\u4F5C\uFF0C\u4EE5\u83B7\u5F97\u987A\u7545\u7684\u5F00\u53D1\u4F53\u9A8C\u3002
# \u901A\u8FC7 npm \u5B89\u88C5
+npm i -D miniprogram-api-typings
+
+# \u901A\u8FC7 yarn \u5B89\u88C5
+yarn add -D miniprogram-api-typings
+
\u8BF7\u5C06path/to/node_modules/@vant/weapp
\u4FEE\u6539\u4E3A\u9879\u76EE\u7684 node_modules
\u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002
{
+ ...
+ "compilerOptions": {
+ ...
+ "baseUrl": ".",
+ "types": ["miniprogram-api-typings"],
+ "paths": {
+ "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
+ },
+ "lib": ["ES6"]
+ }
+}
+
\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A\u793A\u4F8B\u5DE5\u7A0B\uFF0C\u793A\u4F8B\u5DE5\u7A0B\u4F1A\u5E2E\u52A9\u4F60\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A
\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u53EA\u9700\u8981\u5728app.json
\u6216index.json
\u4E2D\u914D\u7F6E Button \u5BF9\u5E94\u7684\u8DEF\u5F84\u5373\u53EF\u3002
\u6240\u6709\u7EC4\u4EF6\u6587\u6863\u4E2D\u7684\u5F15\u5165\u8DEF\u5F84\u5747\u4EE5 npm \u5B89\u88C5\u4E3A\u4F8B\uFF0C\u5982\u679C\u4F60\u662F\u901A\u8FC7\u4E0B\u8F7D\u6E90\u4EE3\u7801\u7684\u65B9\u5F0F\u4F7F\u7528 @vant/weapp\uFF0C\u8BF7\u5C06\u8DEF\u5F84\u4FEE\u6539\u4E3A\u9879\u76EE\u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002
// \u901A\u8FC7 npm \u5B89\u88C5
+// app.json
+"usingComponents": {
+ "van-button": "@vant/weapp/button/index"
+}
+
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es6\u7248\u672C
+// app.json
+"usingComponents": {
+ "van-button": "path/to/@vant/weapp/dist/button/index"
+}
+
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es5\u7248\u672C
+// app.json
+"usingComponents": {
+ "van-button": "path/to/@vant/weapp/lib/button/index"
+}
+
\u5F15\u5165\u7EC4\u4EF6\u540E\uFF0C\u53EF\u4EE5\u5728 wxml \u4E2D\u76F4\u63A5\u4F7F\u7528\u7EC4\u4EF6
<van-button type="primary">\u6309\u94AE</van-button>
+
+# \u5C06\u9879\u76EE\u514B\u9686\u5230\u672C\u5730
+git clone git@github.com:youzan/vant-weapp.git
+
+# \u5B89\u88C5\u9879\u76EE\u4F9D\u8D56
+cd vant-weapp && npm install
+
+# \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1
+npm run dev
+
+
\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165example
\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002
@vant/weapp \u90E8\u5206\u7EC4\u4EF6\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u63A5\u53E3\uFF0C\u5176\u4E2D\u90E8\u5206\u63A5\u53E3\u6D89\u53CA\u83B7\u53D6\u7528\u6237\u9690\u79C1\u4FE1\u606F\u3002
\u4F8B\u5982 <Uploader />
\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u9009\u62E9\u7528\u6237\u76F8\u518C\u4E2D\u56FE\u7247\u63A5\u53E3(wx.chooseImage)
\u3002
\u5F53\u5C0F\u7A0B\u5E8F\u5F15\u5165 @vant/weapp \u5E76\u53D1\u5E03\u65F6\uFF0C \u6839\u636E\u5FAE\u4FE1\u300A\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u586B\u5199\u8BF4\u660E\u300B\uFF0C \u5982\u68C0\u6D4B\u5230\u4EE3\u7801\u4E2D\u5B58\u5728\u6D89\u53CA\u7528\u6237\u9690\u79C1\u4FE1\u606F\u63A5\u53E3\u5219\u9700\u586B\u5199\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u4FE1\u606F\uFF0C\u5982\u5DF2\u586B\u5199\u5219\u65E0\u9700\u91CD\u590D\u586B\u5199\u3002
\u5C0F\u7A0B\u5E8F\u57FA\u4E8E Shadow DOM \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 CSS \u53D8\u91CF \u6765\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3002\u94FE\u63A5\u4E2D\u7684\u5185\u5BB9\u53EF\u4EE5\u5E2E\u52A9\u4F60\u5BF9\u8FD9\u4E24\u4E2A\u6982\u5FF5\u6709\u57FA\u672C\u7684\u8BA4\u8BC6\uFF0C\u907F\u514D\u8BB8\u591A\u4E0D\u5FC5\u8981\u7684\u56F0\u6270\u3002
CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 \u8FD9\u91CC \u67E5\u770B\u3002\u5BF9\u4E8E\u4E0D\u652F\u6301 CSS \u53D8\u91CF \u7684\u8BBE\u5907\uFF0C\u5B9A\u5236\u4E3B\u9898\u5C06\u4E0D\u4F1A\u751F\u6548\uFF0C\u4E0D\u8FC7\u4E0D\u5FC5\u62C5\u5FC3\uFF0C\u9ED8\u8BA4\u6837\u5F0F\u4ECD\u4F1A\u751F\u6548\u3002
\u5B9A\u5236\u4F7F\u7528\u7684 CSS \u53D8\u91CF \u4E0E Less \u53D8\u91CF \u540C\u540D\uFF0C\u4E0B\u9762\u662F\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u6240\u6709\u53EF\u7528\u7684\u989C\u8272\u53D8\u91CF\u8BF7\u53C2\u8003 \u914D\u7F6E\u6587\u4EF6\u3002
// Component Colors
+@text-color: #323233;
+@border-color: #ebedf0;
+@active-color: #f2f3f5;
+@background-color: #f8f8f8;
+@background-color-light: #fafafa;
+
\u5728 wxss \u4E2D\u4E3A\u7EC4\u4EF6\u8BBE\u7F6E CSS \u53D8\u91CF
<van-button class="my-button">
+ \u9ED8\u8BA4\u6309\u94AE
+</van-button>
+
.my-button {
+ --button-border-radius: 10px;
+ --button-default-color: #f2f3f5;
+}
+
\u6216\u901A\u8FC7 style \u5C5E\u6027\u6765\u8BBE\u7F6E CSS \u53D8\u91CF\uFF0C\u8FD9\u4F7F\u4F60\u80FD\u591F\u8F7B\u677E\u5B9E\u73B0\u4E3B\u9898\u7684\u52A8\u6001\u5207\u6362
<van-button style="{{ buttonStyle }}">
+ \u9ED8\u8BA4\u6309\u94AE
+</van-button>
+
Page({
+ data: {
+ buttonStyle: \`
+ --button-border-radius: 10px;
+ --button-default-color: green;
+ \`,
+ },
+
+ onLoad() {
+ setTimeout(() => {
+ this.setData({
+ buttonStyle: \`
+ --button-border-radius: 2px;
+ --button-default-color: pink;
+ \`,
+ });
+ }, 2000);
+ },
+});
+
\u4E0E\u5355\u4E2A\u7EC4\u4EF6\u7684\u5B9A\u5236\u65B9\u5F0F\u7C7B\u4F3C\uFF0C\u53EA\u9700\u7528\u4E00\u4E2A container \u8282\u70B9\u5305\u88F9\u4F4F\u9700\u8981\u5B9A\u5236\u7684\u7EC4\u4EF6\uFF0C\u5E76\u5C06 CSS \u53D8\u91CF \u8BBE\u7F6E\u5728 container \u8282\u70B9\u4E0A
<view class="container">
+ <van-button bind:click="onClick">
+ \u9ED8\u8BA4\u6309\u94AE
+ </van-button>
+
+ <van-toast id="van-toast" />
+</view>
+
import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+ onClick() {
+ Toast('\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~');
+ },
+});
+
.container {
+ --button-border-radius: 10px;
+ --button-default-color: #f2f3f5;
+ --toast-max-width: 100px;
+ --toast-background-color: pink;
+}
+
\u5728 app.wxss \u4E2D\uFF0C\u5199\u5165 CSS \u53D8\u91CF\uFF0C\u5373\u53EF\u5BF9\u5168\u5C40\u751F\u6548
page {
+ --button-border-radius: 10px;
+ --button-default-color: #f2f3f5;
+ --toast-max-width: 100px;
+ --toast-background-color: pink;
+}
+
\u5E95\u90E8\u5F39\u8D77\u7684\u6A21\u6001\u9762\u677F\uFF0C\u5305\u542B\u4E0E\u5F53\u524D\u60C5\u5883\u76F8\u5173\u7684\u591A\u4E2A\u9009\u9879\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-action-sheet": "@vant/weapp/action-sheet/index"
+}
+
\u9700\u8981\u4F20\u5165\u4E00\u4E2Aactions
\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-action-sheet
+ show="{{ show }}"
+ actions="{{ actions }}"
+ bind:close="onClose"
+ bind:select="onSelect"
+/>
+
Page({
+ data: {
+ show: false,
+ actions: [
+ {
+ name: '\u9009\u9879',
+ },
+ {
+ name: '\u9009\u9879',
+ },
+ {
+ name: '\u9009\u9879',
+ subname: '\u63CF\u8FF0\u4FE1\u606F',
+ openType: 'share',
+ },
+ ],
+ },
+
+ onClose() {
+ this.setData({ show: false });
+ },
+
+ onSelect(event) {
+ console.log(event.detail);
+ },
+});
+
\u8BBE\u7F6Ecancel-text
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5E95\u90E8\u5C55\u793A\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u5173\u95ED\u5F53\u524D\u83DC\u5355\u3002
<van-action-sheet
+ show="{{ show }}"
+ actions="{{ actions }}"
+ cancel-text="\u53D6\u6D88"
+/>
+
\u8BBE\u7F6Edescription
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u9009\u9879\u4E0A\u65B9\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\u3002
<van-action-sheet
+ show="{{ show }}"
+ actions="{{ actions }}"
+ description="\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"
+/>
+
\u9009\u9879\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\u3002
<van-action-sheet
+ show="{{ show }}"
+ actions="{{ actions }}"
+ cancel-text="\u53D6\u6D88"
+/>
+
Page({
+ data: {
+ show: false,
+ actions: [
+ { name: '\u7740\u8272\u9009\u9879', color: '#ee0a24' },
+ { loading: true },
+ { name: '\u7981\u7528\u9009\u9879', disabled: true },
+ ],
+ },
+});
+
\u901A\u8FC7\u8BBE\u7F6Etitle
\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9\u3002
<van-action-sheet show="{{ show }}" title="\u6807\u9898">
+ <view>\u5185\u5BB9</view>
+</van-action-sheet>
+
\u9700\u8981\u4F20\u5165\u4E00\u4E2Aactions
\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-action-sheet
+ show="{{ show }}"
+ actions="{{ actions }}"
+ bind:close="onClose"
+ bind:getuserinfo="onGetUserInfo"
+/>
+
Page({
+ data: {
+ show: false,
+ actions: [
+ { name: '\u83B7\u53D6\u7528\u6237\u4FE1\u606F', color: '#07c160', openType: 'getUserInfo' },
+ ],
+ },
+
+ onClose() {
+ this.setData({ show: false });
+ },
+
+ onGetUserInfo(e) {
+ console.log(e.detail);
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
show | \u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677F | boolean | - |
actions | \u83DC\u5355\u9009\u9879 | Array | [] |
title | \u6807\u9898 | string | - |
description v1.0.0 | \u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | string | - |
z-index | z-index \u5C42\u7EA7 | number | 100 |
cancel-text | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | - |
overlay | \u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | boolean | - |
round v1.0.0 | \u662F\u5426\u663E\u793A\u5706\u89D2 | boolean | true |
close-on-click-action | \u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED | boolean | true |
close-on-click-overlay | \u70B9\u51FB\u906E\u7F69\u662F\u5426\u5173\u95ED\u83DC\u5355 | boolean | - |
safe-area-inset-bottom | \u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB | boolean | true |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:select | \u9009\u4E2D\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 | event.detail: \u9009\u9879\u5BF9\u5E94\u7684\u5BF9\u8C61 |
bind:close | \u5173\u95ED\u65F6\u89E6\u53D1 | - |
bind:cancel | \u53D6\u6D88\u6309\u94AE\u70B9\u51FB\u65F6\u89E6\u53D1 | - |
bind:click-overlay | \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | - |
bind:getuserinfo | \u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C\u56DE\u8C03\u7684 detail \u6570\u636E\u4E0E wx.getUserInfo \u8FD4\u56DE\u7684\u4E00\u81F4\uFF0CopenType="getUserInfo"\u65F6\u6709\u6548 | - |
bind:contact | \u5BA2\u670D\u6D88\u606F\u56DE\u8C03\uFF0CopenType="contact"\u65F6\u6709\u6548 | - |
bind:getphonenumber | \u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03\uFF0CopenType="getPhoneNumber"\u65F6\u6709\u6548 | - |
bind:error | \u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03\uFF0CopenType="launchApp"\u65F6\u6709\u6548 | - |
bind:launchapp | \u6253\u5F00 APP \u6210\u529F\u7684\u56DE\u8C03\uFF0CopenType="launchApp"\u65F6\u6709\u6548 | - |
bind:opensetting | \u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03\uFF0CopenType="openSetting"\u65F6\u6709\u6548 | - |
API
\u4E2D\u7684actions
\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0Bkey
\uFF1A
\u952E\u540D | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u9898 | string | - |
subname | \u4E8C\u7EA7\u6807\u9898 | string | - |
color | \u9009\u9879\u6587\u5B57\u989C\u8272 | string | - |
loading | \u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | boolean | - |
disabled | \u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | boolean | - |
className | \u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class \u7C7B\u540D | string | - |
openType | \u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0Czh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en |
sessionFrom | \u4F1A\u8BDD\u6765\u6E90\uFF0CopenType="contact"\u65F6\u6709\u6548 | string | - |
sendMessageTitle | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898\uFF0CopenType="contact"\u65F6\u6709\u6548 | string | \u5F53\u524D\u6807\u9898 |
sendMessagePath | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84\uFF0CopenType="contact"\u65F6\u6709\u6548 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 |
sendMessageImg | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u56FE\u7247\uFF0CopenType="contact"\u65F6\u6709\u6548 | string | \u622A\u56FE |
showMessageCard | \u662F\u5426\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\uFF0C\u8BBE\u7F6E\u6B64\u53C2\u6570\u4E3A true\uFF0C\u7528\u6237\u8FDB\u5165\u5BA2\u670D\u4F1A\u8BDD\u4F1A\u5728\u53F3\u4E0B\u89D2\u663E\u793A"\u53EF\u80FD\u8981\u53D1\u9001\u7684\u5C0F\u7A0B\u5E8F"\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u53D1\u9001\u5C0F\u7A0B\u5E8F\u6D88\u606F\uFF0CopenType="contact"\u65F6\u6709\u6548 | string | false |
appParameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570\uFF0CopenType=launchApp \u65F6\u6709\u6548 | string | - |
\u7701\u5E02\u533A\u9009\u62E9\u7EC4\u4EF6\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-area": "@vant/weapp/area/index"
+}
+
\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 area-list
\u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002
<van-area area-list="{{ areaList }}" />
+
areaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B province_list
\u3001city_list
\u3001county_list
\u4E09\u4E2A key\u3002
\u6BCF\u9879\u4EE5\u5730\u533A\u7801\u4F5C\u4E3A key\uFF0C\u7701\u5E02\u533A\u540D\u5B57\u4F5C\u4E3A value\u3002\u5730\u533A\u7801\u4E3A 6 \u4F4D\u6570\u5B57\uFF0C\u524D\u4E24\u4F4D\u4EE3\u8868\u7701\u4EFD\uFF0C\u4E2D\u95F4\u4E24\u4F4D\u4EE3\u8868\u57CE\u5E02\uFF0C\u540E\u4E24\u4F4D\u4EE3\u8868\u533A\u53BF\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\u3002\u6BD4\u5982\u5317\u4EAC\u7684\u5730\u533A\u7801\u4E3A 11
\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A 110000
\u3002
\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A
const areaList = {
+ province_list: {
+ 110000: '\u5317\u4EAC\u5E02',
+ 120000: '\u5929\u6D25\u5E02',
+ },
+ city_list: {
+ 110100: '\u5317\u4EAC\u5E02',
+ 120100: '\u5929\u6D25\u5E02',
+ },
+ county_list: {
+ 110101: '\u4E1C\u57CE\u533A',
+ 110102: '\u897F\u57CE\u533A',
+ // ....
+ },
+};
+
Vant \u5B98\u65B9\u63D0\u4F9B\u4E86\u4E00\u4EFD\u9ED8\u8BA4\u7684\u7701\u5E02\u533A\u6570\u636E\uFF0C\u53EF\u4EE5\u901A\u8FC7 @vant/area-data \u5F15\u5165\u3002
yarn add @vant/area-data
+
import { areaList } from '@vant/area-data';
+
+Page({
+ data: {
+ areaList,
+ },
+});
+
\u5982\u679C\u60F3\u9009\u4E2D\u67D0\u4E2A\u7701\u5E02\u533A\uFF0C\u9700\u8981\u4F20\u5165\u4E00\u4E2Avalue
\u5C5E\u6027\uFF0C\u7ED1\u5B9A\u5BF9\u5E94\u7684\u7701\u5E02\u533Acode
\u3002
<van-area area-list="{{ areaList }}" value="110101" />
+
\u53EF\u4EE5\u901A\u8FC7columns-num
\u5C5E\u6027\u914D\u7F6E\u7701\u5E02\u533A\u663E\u793A\u7684\u5217\u6570\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4F1A\u663E\u793A\u7701\u5E02\u533A\uFF0C\u5F53\u4F60\u8BBE\u7F6E\u4E3A2
\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002
<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="\u6807\u9898" />
+
\u53EF\u4EE5\u901A\u8FC7columns-placeholder
\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002
<van-area
+ area-list="{{ areaList }}"
+ columns-placeholder="{{ ['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9'] }}"
+ title="\u6807\u9898"
+/>
+
\u5B9E\u9645\u9879\u76EE\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1\u7684\u80FD\u529B\uFF0C\u5C06\u7701\u5E02\u533A\u6570\u636E\u4FDD\u5B58\u5728\u4E91\u5F00\u53D1\u7684\u6570\u636E\u5E93\u4E2D\uFF0C\u5E76\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u5F00\u53D1\u7684\u63A5\u53E3\u5F02\u6B65\u83B7\u53D6\u6570\u636E\u3002
\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u80FD\u529B\u4E4B\u524D\u9700\u8981\u5148\u8C03\u7528wx.could.init
\u65B9\u6CD5\u5B8C\u6210\u4E91\u80FD\u529B\u7684\u521D\u59CB\u5316\u3002
const db = wx.cloud.database();
+
+db.collection('region')
+ .limit(1)
+ .get()
+ .then((res) => {
+ if (res.data && res.data.length > 0) {
+ this.setData({
+ areaList: res.data[0],
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u5F53\u524D\u9009\u4E2D\u7684\u7701\u5E02\u533Acode | string | - |
title | \u9876\u90E8\u680F\u6807\u9898 | string | - |
area-list | \u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9 | object | - |
columns-num | \u7701\u5E02\u533A\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701 | string | number | 3 |
columns-placeholder | \u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | string[] | [] |
loading | \u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
item-height | \u9009\u9879\u9AD8\u5EA6 | number | 44 |
visible-item-count | \u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | number | 6 |
confirm-button-text | \u786E\u8BA4\u6309\u94AE\u6587\u5B57 | string | \u786E\u8BA4 |
cancel-button-text | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | \u53D6\u6D88 |
show-toolbar 1.10.3 | \u662F\u5426\u663E\u793A\u9876\u90E8\u680F | boolean | true |
\u4E8B\u4EF6 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:confirm | \u70B9\u51FB\u53F3\u4E0A\u65B9\u5B8C\u6210\u6309\u94AE | \u4E00\u4E2A\u6570\u7EC4\u53C2\u6570\uFF0C\u5177\u4F53\u683C\u5F0F\u770B\u4E0B\u65B9\u6570\u636E\u683C\u5F0F\u7AE0\u8282 |
bind:cancel | \u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6 | - |
bind:change | \u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | Picker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15 |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
reset | code: string | - | \u6839\u636E code \u91CD\u7F6E\u6240\u6709\u9009\u9879\uFF0C\u82E5\u4E0D\u4F20 code\uFF0C\u5219\u91CD\u7F6E\u5230\u7B2C\u4E00\u9879 |
\u8FD4\u56DE\u7684\u6570\u636E\u6574\u4F53\u4E3A\u4E00\u4E2A Object\uFF0C\u5305\u542B values
, indexs
\u4E24\u4E2A key\u3002
values
\u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B columnsNum
\u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u7684\u6570\u636E\u3002
code
\u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u7F16\u7801\uFF0C name
\u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u540D\u79F0\u3002
[
+ {
+ code: '110000',
+ name: '\u5317\u4EAC\u5E02',
+ },
+ {
+ code: '110100',
+ name: '\u5317\u4EAC\u5E02',
+ },
+ {
+ code: '110101',
+ name: '\u4E1C\u57CE\u533A',
+ },
+];
+
indexs
\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B columnsNum
\u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u9879\u7684\u5E8F\u53F7\u3002
\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-button": "@vant/weapp/button/index"
+}
+
\u652F\u6301default
\u3001primary
\u3001info
\u3001warning
\u3001danger
\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3Adefault
\u3002
<van-button type="default">\u9ED8\u8BA4\u6309\u94AE</van-button>
+<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
+<van-button type="info">\u4FE1\u606F\u6309\u94AE</van-button>
+<van-button type="warning">\u8B66\u544A\u6309\u94AE</van-button>
+<van-button type="danger">\u5371\u9669\u6309\u94AE</van-button>
+
\u901A\u8FC7plain
\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002
<van-button plain type="primary">\u6734\u7D20\u6309\u94AE</van-button>
+<van-button plain type="info">\u6734\u7D20\u6309\u94AE</van-button>
+
\u8BBE\u7F6Ehairline
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F 0.5px \u8FB9\u6846\uFF0C\u57FA\u4E8E\u4F2A\u7C7B\u5B9E\u73B0\u3002
<van-button plain hairline type="primary">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>
+<van-button plain hairline type="info">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>
+
\u901A\u8FC7disabled
\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u6B64\u65F6\u6309\u94AE\u7684bind:click
\u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\u3002
<van-button disabled type="primary">\u7981\u7528\u72B6\u6001</van-button>
+<van-button disabled type="info">\u7981\u7528\u72B6\u6001</van-button>
+
<van-button loading type="primary" />
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="info" loading-text="\u52A0\u8F7D\u4E2D..." />
+
<van-button square type="primary">\u65B9\u5F62\u6309\u94AE</van-button>
+<van-button round type="info">\u5706\u5F62\u6309\u94AE</van-button>
+
\u901A\u8FC7icon
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u56FE\u6807\uFF0C\u652F\u6301 Icon \u7EC4\u4EF6\u91CC\u7684\u6240\u6709\u56FE\u6807\uFF0C\u4E5F\u53EF\u4EE5\u4F20\u5165\u56FE\u6807 URL\u3002
<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="primary">\u6309\u94AE</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">
+ \u6309\u94AE
+</van-button>
+
\u652F\u6301large
\u3001normal
\u3001small
\u3001mini
\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anormal
\u3002
<van-button type="primary" size="large">\u5927\u53F7\u6309\u94AE</van-button>
+<van-button type="primary" size="normal">\u666E\u901A\u6309\u94AE</van-button>
+<van-button type="primary" size="small">\u5C0F\u578B\u6309\u94AE</van-button>
+<van-button type="primary" size="mini">\u8FF7\u4F60\u6309\u94AE</van-button>
+
\u901A\u8FC7block
\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002
<van-button type="primary" block>\u5757\u7EA7\u5143\u7D20</van-button>
+
\u901A\u8FC7color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002
<van-button color="#7232dd">\u5355\u8272\u6309\u94AE</van-button>
+<van-button color="#7232dd" plain>\u5355\u8272\u6309\u94AE</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
+ \u6E10\u53D8\u8272\u6309\u94AE
+</van-button>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
id | \u6807\u8BC6\u7B26 | string | - |
type | \u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary info warning danger | string | default |
size | \u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A normal large small mini | string | normal |
color v1.0.0 | \u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165linear-gradient \u6E10\u53D8\u8272 | string | - |
icon | \u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
class-prefix | \u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | string | van-icon |
plain | \u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE | boolean | false |
block | \u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20 | boolean | false |
round | \u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AE | boolean | false |
square | \u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AE | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u6309\u94AE | boolean | false |
hairline | \u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846 | boolean | false |
loading | \u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
loading-text | \u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57 | string | - |
loading-type | \u52A0\u8F7D\u72B6\u6001\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | string | circular |
loading-size | \u52A0\u8F7D\u56FE\u6807\u5927\u5C0F | string | 20px |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
open-type | \u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
app-parameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570 | string | - |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en |
session-from | \u4F1A\u8BDD\u6765\u6E90 | string | - |
business-id | \u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id | number | - |
send-message-title | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898 | string | \u5F53\u524D\u6807\u9898 |
send-message-path | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 |
send-message-img | sendMessageImg | string | \u622A\u56FE |
show-message-card | \u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247 | string | false |
dataset | \u6309\u94AE dataset\uFF0Copen-type \u4E3A share \u65F6\uFF0C\u53EF\u5728 onShareAppMessage \u4E8B\u4EF6\u7684 event.target.dataset.detail \u4E2D\u770B\u5230\u4F20\u5165\u7684\u503C | any | - |
form-type | \u7528\u4E8E form \u7EC4\u4EF6\uFF0C\u53EF\u9009\u503C\u4E3Asubmit reset \uFF0C\u70B9\u51FB\u5206\u522B\u4F1A\u89E6\u53D1 form \u7EC4\u4EF6\u7684 submit/reset \u4E8B\u4EF6 | string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1 | - |
bind:getuserinfo | \u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C \u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo | - |
bind:contact | \u5BA2\u670D\u6D88\u606F\u56DE\u8C03 | - |
bind:getphonenumber | \u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03 | - |
bind:error | \u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03 | - |
bind:opensetting | \u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03 | - |
Button \u63D0\u4F9B\u7684\u662F click \u4E8B\u4EF6\u800C\u4E0D\u662F\u539F\u751F tap \u4E8B\u4EF6\uFF0C\u6309\u94AE\u7981\u7528\u65F6\uFF0Cclick \u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\uFF0Ctap \u4E8B\u4EF6\u4F9D\u7136\u4F1A\u89E6\u53D1\u3002
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
loading-class | \u52A0\u8F7D\u56FE\u6807\u6837\u5F0F\u7C7B |
\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-calendar": "@vant/weapp/calendar/index"
+}
+
\u4E0B\u9762\u6F14\u793A\u4E86\u7ED3\u5408\u5355\u5143\u683C\u6765\u4F7F\u7528\u65E5\u5386\u7EC4\u4EF6\u7684\u7528\u6CD5\uFF0C\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u89E6\u53D1confirm
\u4E8B\u4EF6\u3002
<van-cell title="\u9009\u62E9\u5355\u4E2A\u65E5\u671F" value="{{ date }}" bind:click="onDisplay" />
+<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
+
Page({
+ data: {
+ date: '',
+ show: false,
+ },
+
+ onDisplay() {
+ this.setData({ show: true });
+ },
+ onClose() {
+ this.setData({ show: false });
+ },
+ formatDate(date) {
+ date = new Date(date);
+ return \`\${date.getMonth() + 1}/\${date.getDate()}\`;
+ },
+ onConfirm(event) {
+ this.setData({
+ show: false,
+ date: this.formatDate(event.detail),
+ });
+ },
+});
+
\u8BBE\u7F6Etype
\u4E3Amultiple
\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u5305\u542B\u82E5\u5E72\u4E2A\u9009\u4E2D\u7684\u65E5\u671F\u3002
<van-cell title="\u9009\u62E9\u591A\u4E2A\u65E5\u671F" value="{{ text }}" bind:click="onDisplay" />
+<van-calendar
+ show="{{ show }}"
+ type="multiple"
+ bind:close="onClose"
+ bind:confirm="onConfirm"
+/>
+
Page({
+ data: {
+ text: '',
+ show: false,
+ },
+
+ onDisplay() {
+ this.setData({ show: true });
+ },
+ onClose() {
+ this.setData({ show: false });
+ },
+ onConfirm(event) {
+ this.setData({
+ show: false,
+ date: \`\u9009\u62E9\u4E86 \${event.detail.length} \u4E2A\u65E5\u671F\`,
+ });
+ },
+});
+
\u8BBE\u7F6Etype
\u4E3Arange
\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u7B2C\u4E00\u9879\u4E3A\u5F00\u59CB\u65F6\u95F4\uFF0C\u7B2C\u4E8C\u9879\u4E3A\u7ED3\u675F\u65F6\u95F4\u3002
<van-cell title="\u9009\u62E9\u65E5\u671F\u533A\u95F4" value="{{ date }}" bind:click="onDisplay" />
+<van-calendar
+ show="{{ show }}"
+ type="range"
+ bind:close="onClose"
+ bind:confirm="onConfirm"
+/>
+
Page({
+ data: {
+ date: '',
+ show: false,
+ },
+
+ onDisplay() {
+ this.setData({ show: true });
+ },
+ onClose() {
+ this.setData({ show: false });
+ },
+ formatDate(date) {
+ date = new Date(date);
+ return \`\${date.getMonth() + 1}/\${date.getDate()}\`;
+ },
+ onConfirm(event) {
+ const [start, end] = event.detail;
+ this.setData({
+ show: false,
+ date: \`\${this.formatDate(start)} - \${this.formatDate(end)}\`,
+ });
+ },
+});
+
Tips: \u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u65E5\u671F\u533A\u95F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E0D\u80FD\u4E3A\u540C\u4E00\u5929\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E allow-same-day \u5C5E\u6027\u6765\u5141\u8BB8\u9009\u62E9\u540C\u4E00\u5929\u3002
\u5C06show-confirm
\u8BBE\u7F6E\u4E3Afalse
\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1confirm
\u4E8B\u4EF6\u3002
<van-calendar show="{{ show }}" show-confirm="{{ false }}" />
+
\u901A\u8FC7color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u5386\u7684\u989C\u8272\uFF0C\u5BF9\u9009\u4E2D\u65E5\u671F\u548C\u5E95\u90E8\u6309\u94AE\u751F\u6548\u3002
<van-calendar show="{{ show }}" color="#07c160" />
+
\u901A\u8FC7min-date
\u548Cmax-date
\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662Fmin-date
\u548Cmax-date
\u7684\u533A\u95F4\u4E0D\u5B9C\u8FC7\u5927\uFF0C\u5426\u5219\u4F1A\u9020\u6210\u4E25\u91CD\u7684\u6027\u80FD\u95EE\u9898\u3002
<van-calendar
+ show="{{ show }}"
+ min-date="{{ minDate }}"
+ max-date="{{ maxDate }}"
+/>
+
Page({
+ data: {
+ show: false,
+ minDate: new Date(2010, 0, 1).getTime(),
+ maxDate: new Date(2010, 0, 31).getTime(),
+ },
+});
+
\u901A\u8FC7confirm-text
\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7confirm-disabled-text
\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002
<van-calendar
+ show="{{ show }}"
+ type="range"
+ confirm-text="\u5B8C\u6210"
+ confirm-disabled-text="\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"
+/>
+
\u901A\u8FC7\u4F20\u5165formatter
\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316
<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />
+
Page({
+ data: {
+ formatter(day) {
+ const month = day.date.getMonth() + 1;
+ const date = day.date.getDate();
+
+ if (month === 5) {
+ if (date === 1) {
+ day.topInfo = '\u52B3\u52A8\u8282';
+ } else if (date === 4) {
+ day.topInfo = '\u4E94\u56DB\u9752\u5E74\u8282';
+ } else if (date === 11) {
+ day.text = '\u4ECA\u5929';
+ }
+ }
+
+ if (day.type === 'start') {
+ day.bottomInfo = '\u5165\u4F4F';
+ } else if (day.type === 'end') {
+ day.bottomInfo = '\u79BB\u5E97';
+ }
+
+ return day;
+ },
+ },
+});
+
\u901A\u8FC7position
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3Atop
\u3001left
\u3001right
\u3002
<van-calendar show="{{ show }}" round="false" position="right" />
+
\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7max-range
\u5C5E\u6027\u6765\u6307\u5B9A\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9009\u62E9\u7684\u8303\u56F4\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u4F1A\u5F39\u51FA\u76F8\u5E94\u7684\u63D0\u793A\u6587\u6848\u3002
<van-calendar type="range" max-range="{{ 3 }}" />
+
\u901A\u8FC7 first-day-of-week
\u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002
<van-calendar first-day-of-week="{{ 1 }}" />
+
\u5C06poppable
\u8BBE\u7F6E\u4E3Afalse
\uFF0C\u65E5\u5386\u4F1A\u76F4\u63A5\u5C55\u793A\u5728\u9875\u9762\u5185\uFF0C\u800C\u4E0D\u662F\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u51FA\u73B0\u3002
<van-calendar
+ title="\u65E5\u5386"
+ poppable="{{ false }}"
+ show-confirm="{{ false }}"
+ class="calendar"
+/>
+
.calendar {
+ --calendar-height: 500px;
+}
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type | \u9009\u62E9\u7C7B\u578B:single \u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0Cmultiple \u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0Crange \u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4 | string | single |
title | \u65E5\u5386\u6807\u9898 | string | \u65E5\u671F\u9009\u62E9 |
color | \u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548 | string | #ee0a24 |
min-date | \u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671F | timestamp | \u5F53\u524D\u65E5\u671F |
max-date | \u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671F | timestamp | \u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E |
default-date | \u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0Ctype \u4E3Amultiple \u6216range \u65F6\u4E3A\u6570\u7EC4 | timestamp | timestamp[] | \u4ECA\u5929 |
row-height | \u65E5\u671F\u884C\u9AD8 | number | string | 64 |
formatter | \u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570 | (day: Day) => Day | - |
poppable | \u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386 | boolean | true |
show-mark | \u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370 | boolean | true |
show-title | \u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898 | boolean | true |
show-subtitle | \u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09 | boolean | true |
show-confirm | \u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | boolean | true |
confirm-text | \u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57 | string | \u786E\u5B9A |
confirm-disabled-text | \u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57 | string | \u786E\u5B9A |
first-day-of-week | \u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 | 0~6 | 0 |
readonly v1.9.1 | \u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u4E0D\u80FD\u9009\u62E9\u65E5\u671F | boolean | false |
\u5F53 Calendar \u7684 poppable
\u4E3A true
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
show | \u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97 | boolean | false |
position | \u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top right left | string | bottom |
round | \u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97 | boolean | true |
close-on-click-overlay | \u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | boolean | true |
safe-area-inset-bottom | \u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | boolean | true |
\u5F53 Calendar \u7684 type
\u4E3A range
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
max-range | \u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9ED8\u8BA4\u65E0\u9650\u5236 | number | string | - |
range-prompt | \u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848 | string | null | \u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 xx \u5929 |
show-range-prompt | \u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 | boolean | true |
allow-same-day | \u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929 | boolean | false |
\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7formatter
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9\u3002
\u952E\u540D | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
date | \u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61 | Date |
type | \u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3Aselected \u3001start \u3001middle \u3001end \u3001disabled | string |
text | \u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57 | string |
topInfo | \u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F | string |
bottomInfo | \u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F | string |
className | \u81EA\u5B9A\u4E49 className | string |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:select | \u70B9\u51FB\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1 | value: Date | Date[] |
bind:unselect | \u5F53 Calendar \u7684 type \u4E3A multiple \u65F6,\u70B9\u51FB\u5DF2\u9009\u4E2D\u7684\u65E5\u671F\u65F6\u89E6\u53D1 | value: Date |
bind:confirm | \u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5show-confirm \u4E3Atrue \uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1 | value: Date | Date[] |
bind:open | \u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | - |
bind:close | \u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | - |
bind:opened | \u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | - |
bind:closed | \u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | - |
bind:over-range | \u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1 | - |
bind:click-subtitle v1.8.1 | \u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1 | WechatMiniprogram.TouchEvent |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49\u6807\u9898 |
footer | \u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9 |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u8BF4\u660E | \u53C2\u6570 | \u8FD4\u56DE\u503C |
---|---|---|---|
reset | \u91CD\u7F6E\u9009\u4E2D\u7684\u65E5\u671F\u5230\u9ED8\u8BA4\u503C | - | - |
\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-card": "@vant/weapp/card/index"
+}
+
<van-card
+ num="2"
+ price="2.00"
+ desc="\u63CF\u8FF0\u4FE1\u606F"
+ title="\u5546\u54C1\u6807\u9898"
+ thumb="{{ imageURL }}"
+/>
+
\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u6DFB\u52A0\u5B9A\u5236\u5185\u5BB9\u3002
<van-card
+ num="2"
+ tag="\u6807\u7B7E"
+ price="10.00"
+ desc="\u63CF\u8FF0\u4FE1\u606F"
+ title="\u5546\u54C1\u6807\u9898"
+ thumb="{{ imageURL }}"
+>
+ <view slot="footer">
+ <van-button size="mini">\u6309\u94AE</van-button>
+ <van-button size="mini">\u6309\u94AE</van-button>
+ </view>
+</van-card>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
thumb | \u5DE6\u4FA7\u56FE\u7247 | string | - |
thumb-mode | \u5DE6\u4FA7\u56FE\u7247\u88C1\u526A\u3001\u7F29\u653E\u7684\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F image \u7EC4\u4EF6 mode \u5C5E\u6027\u503C | string | aspectFit |
title | \u6807\u9898 | string | - |
desc | \u63CF\u8FF0 | string | - |
tag | \u6807\u7B7E | string | - |
num | \u5546\u54C1\u6570\u91CF | string | number | - |
price | \u5546\u54C1\u4EF7\u683C | string | number | - |
origin-price | \u5546\u54C1\u5212\u7EBF\u539F\u4EF7 | string | number | - |
centered | \u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2D | string | false |
currency | \u8D27\u5E01\u7B26\u53F7 | string | \xA5 |
thumb-link | \u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | string | - |
link-type | \u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunch | string | navigateTo |
lazy-load | \u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
desc | \u81EA\u5B9A\u4E49\u63CF\u8FF0\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86desc \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
num | \u81EA\u5B9A\u4E49\u6570\u91CF |
price | \u81EA\u5B9A\u4E49\u4EF7\u683C |
origin-price | \u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86origin-price \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
price-top | \u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF |
bottom | \u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF |
thumb | \u81EA\u5B9A\u4E49\u56FE\u7247\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86thumb \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
tag | \u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86tag \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
tags | \u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF |
footer | \u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
thumb-class | \u5DE6\u4FA7\u56FE\u7247\u6837\u5F0F\u7C7B |
title-class | \u6807\u9898\u6837\u5F0F\u7C7B |
price-class | \u4EF7\u683C\u6837\u5F0F\u7C7B |
origin-price-class | \u5212\u7EBF\u539F\u4EF7\u6837\u5F0F\u7C7B |
desc-class | \u63CF\u8FF0\u6837\u5F0F\u7C7B |
num-class | \u6570\u91CF\u6837\u5F0F\u7C7B |
\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-cell": "@vant/weapp/cell/index",
+ "van-cell-group": "@vant/weapp/cell-group/index"
+}
+
Cell
\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0ECellGroup
\u642D\u914D\u4F7F\u7528\u3002CellGroup
\u53EF\u4EE5\u4E3ACell
\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002
<van-cell-group>
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" border="{{ false }}" />
+</van-cell-group>
+
\u901A\u8FC7 CellGroup
\u7684 inset
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u5C06\u5355\u5143\u683C\u8F6C\u6362\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C\uFF08\u4ECE 1.7.2 \u7248\u672C\u5F00\u59CB\u652F\u6301\uFF09\u3002
<van-cell-group inset>
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />
+</van-cell-group>
+
\u901A\u8FC7size
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002
<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" />
+<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" label="\u63CF\u8FF0\u4FE1\u606F" />
+
\u901A\u8FC7icon
\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002
<van-cell title="\u5355\u5143\u683C" icon="location-o" />
+
\u8BBE\u7F6Eis-link
\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7arrow-direction
\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002
<van-cell title="\u5355\u5143\u683C" is-link />
+<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" />
+<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" arrow-direction="down" />
+
\u53EF\u4EE5\u901A\u8FC7url
\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7link-type
\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002
<van-cell
+ is-link
+ title="\u5355\u5143\u683C"
+ link-type="navigateTo"
+ url="/pages/dashboard/index"
+/>
+
\u901A\u8FC7CellGroup
\u7684title
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002
<van-cell-group title="\u5206\u7EC41">
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+</van-cell-group>
+<van-cell-group title="\u5206\u7EC42">
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+</van-cell-group>
+
\u5982\u4EE5\u4E0A\u7528\u6CD5\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-cell value="\u5185\u5BB9" icon="shop-o" is-link>
+ <view slot="title">
+ <view class="van-cell-text">\u5355\u5143\u683C</view>
+ <van-tag type="danger">\u6807\u7B7E</van-tag>
+ </view>
+</van-cell>
+<van-cell title="\u5355\u5143\u683C">
+ <van-icon slot="right-icon" name="search" class="custom-icon" />
+</van-cell>
+
\u901A\u8FC7center
\u5C5E\u6027\u53EF\u4EE5\u8BA9Cell
\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002
<van-cell center title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
title | \u5206\u7EC4\u6807\u9898 | string | - |
inset v1.7.2 | \u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C | boolean | false |
border | \u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | boolean | true |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
icon | \u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
title | \u5DE6\u4FA7\u6807\u9898 | string | number | - |
title-width | \u6807\u9898\u5BBD\u5EA6\uFF0C\u987B\u5305\u542B\u5355\u4F4D | string | - |
value | \u53F3\u4FA7\u5185\u5BB9 | string | number | - |
label | \u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | string | - |
size | \u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large | string | - |
border | \u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846 | boolean | true |
center | \u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | boolean | false |
url | \u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | string | - |
link-type | \u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunch | string | navigateTo |
clickable | \u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | false |
is-link | \u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | false |
required | \u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | boolean | false |
arrow-direction | \u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | string | - |
use-label-slot | \u662F\u5426\u4F7F\u7528 label slot | boolean | false |
title-style v1.4.0 | \u6807\u9898\u6837\u5F0F | string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49value \u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86value \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
title | \u81EA\u5B9A\u4E49title \u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
label | \u81EA\u5B9A\u4E49label \u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E use-label-slot \u5C5E\u6027 |
icon | \u81EA\u5B9A\u4E49icon \u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86icon \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
right-icon | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662Farrow \uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86is-link \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
title-class | \u6807\u9898\u6837\u5F0F\u7C7B |
label-class | \u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B |
value-class | \u53F3\u4FA7\u5185\u5BB9\u6837\u5F0F\u7C7B |
\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-checkbox": "@vant/weapp/checkbox/index",
+ "van-checkbox-group": "@vant/weapp/checkbox-group/index"
+}
+
\u901A\u8FC7value
\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002
<van-checkbox value="{{ checked }}" bind:change="onChange">\u590D\u9009\u6846</van-checkbox>
+
Page({
+ data: {
+ checked: true,
+ },
+
+ onChange(event) {
+ this.setData({
+ checked: event.detail,
+ });
+ },
+});
+
\u901A\u8FC7\u8BBE\u7F6Edisabled
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002
<van-checkbox disabled value="{{ checked }}" bind:change="onChange">
+ \u590D\u9009\u6846
+</van-checkbox>
+
\u5C06shape
\u5C5E\u6027\u8BBE\u7F6E\u4E3Asquare
\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
+ \u590D\u9009\u6846
+</van-checkbox>
+
\u901A\u8FC7checked-color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u989C\u8272\u3002
<van-checkbox
+ value="{{ checked }}"
+ checked-color="#07c160"
+ bind:change="onChange"
+>
+ \u590D\u9009\u6846
+</van-checkbox>
+
\u901A\u8FC7icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-checkbox value="{{ checked }}" icon-size="25px">\u590D\u9009\u6846</van-checkbox>
+
\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\u3002
<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">
+ \u81EA\u5B9A\u4E49\u56FE\u6807
+ <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />
+</van-checkbox>
+
Page({
+ data: {
+ checked: true,
+ activeIcon: '//img.yzcdn.cn/icon-active.png',
+ inactiveIcon: '//img.yzcdn.cn/icon-normal.png',
+ },
+
+ onChange(event) {
+ this.setData({
+ checked: event.detail,
+ });
+ },
+});
+
\u901A\u8FC7\u8BBE\u7F6Elabel-disabled
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002
<van-checkbox value="{{ checked }}" label-disabled>\u590D\u9009\u6846</van-checkbox>
+
\u9700\u8981\u4E0Evan-checkbox-group
\u4E00\u8D77\u4F7F\u7528\uFF0C\u9009\u4E2D\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u901A\u8FC7value
\u7ED1\u5B9A\u5728van-checkbox-group
\u4E0A\uFF0C\u6570\u7EC4\u4E2D\u7684\u9879\u5373\u4E3A\u9009\u4E2D\u7684Checkbox
\u7684name
\u5C5E\u6027\u8BBE\u7F6E\u7684\u503C\u3002
<van-checkbox-group value="{{ result }}" bind:change="onChange">
+ <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>
+ <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>
+ <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>
+</van-checkbox-group>
+
Page({
+ data: {
+ result: ['a', 'b'],
+ },
+
+ onChange(event) {
+ this.setData({
+ result: event.detail,
+ });
+ },
+});
+
<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">
+ <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>
+ <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>
+ <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>
+</van-checkbox-group>
+
\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165Cell
\u548CCellGroup
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 checkbox \u7684 toggle \u65B9\u6CD5\u624B\u52A8\u89E6\u53D1\u5207\u6362\u3002
<van-checkbox-group value="{{ result }}" bind:change="onChange">
+ <van-cell-group>
+ <van-cell
+ wx:for="{{ list }}"
+ wx:key="index"
+ title="\u590D\u9009\u6846 {{ item }}"
+ value-class="value-class"
+ clickable
+ data-index="{{ index }}"
+ bind:click="toggle"
+ >
+ <van-checkbox
+ catch:tap="noop"
+ class="checkboxes-{{ index }}"
+ name="{{ item }}"
+ />
+ </van-cell>
+ </van-cell-group>
+</van-checkbox-group>
+
Page({
+ data: {
+ list: ['a', 'b', 'c'],
+ result: ['a', 'b'],
+ },
+
+ onChange(event) {
+ this.setData({
+ result: event.detail,
+ });
+ },
+
+ toggle(event) {
+ const { index } = event.currentTarget.dataset;
+ const checkbox = this.selectComponent(\`.checkboxes-\${index}\`);
+ checkbox.toggle();
+ },
+
+ noop() {},
+});
+
.value-class {
+ flex: none !important;
+}
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u8BC6 Checkbox \u540D\u79F0 | string | - |
shape | \u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round square | string | round |
value | \u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001 | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u5355\u9009\u6846 | boolean | false |
label-disabled | \u662F\u5426\u7981\u7528\u5355\u9009\u6846\u5185\u5BB9\u70B9\u51FB | boolean | false |
label-position | \u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | string | right |
use-icon-slot | \u662F\u5426\u4F7F\u7528 icon slot | boolean | false |
checked-color | \u9009\u4E2D\u72B6\u6001\u989C\u8272 | string | #1989fa |
icon-size | icon \u5927\u5C0F | string | number | 20px |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
value | \u6240\u6709\u9009\u4E2D\u9879\u7684 name | Array | - |
disabled | \u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846 | boolean | false |
max | \u8BBE\u7F6E\u6700\u5927\u53EF\u9009\u6570 | number | 0 \uFF08\u65E0\u9650\u5236\uFF09 |
direction v1.7.0 | \u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | string | vertical |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D\u7EC4\u4EF6\u7684\u503C |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
icon-class | \u56FE\u6807\u6837\u5F0F\u7C7B |
label-class | \u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D\u7EC4\u4EF6\u7684\u503C |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u6587\u672C |
icon | \u81EA\u5B9A\u4E49\u56FE\u6807 |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
toggle | - | - | \u5207\u6362\u9009\u4E2D\u72B6\u6001 |
\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-circle": "@vant/weapp/circle/index"
+}
+
value
\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\u3002
<van-circle value="{{ 30 }}" text="text" />
+
\u901A\u8FC7stroke-width
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\u3002
<van-circle value="{{ value }}" stroke-width="6" text="\u5BBD\u5EA6\u5B9A\u5236" />
+
\u901A\u8FC7color
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0Clayer-color
\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002
<van-circle
+ value="{{ value }}"
+ layer-color="#eeeeee"
+ color="#ee0a24"
+ text="\u989C\u8272\u5B9A\u5236"
+/>
+
color
\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002
<van-circle value="{{ value }}" color="{{ gradientColor }}" text="\u6E10\u53D8\u8272" />
+
Page({
+ data: {
+ value: 25,
+ gradientColor: {
+ '0%': '#ffd01e',
+ '100%': '#ee0a24',
+ },
+ },
+});
+
\u5C06clockwise
\u8BBE\u7F6E\u4E3Afalse
\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002
<van-circle
+ value="{{ value }}"
+ color="#07c160"
+ clockwise="{{ false }}"
+ text="\u9006\u65F6\u9488"
+/>
+
\u901A\u8FC7size
\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002
<van-circle value="{{ value }}" size="120" text="\u5927\u5C0F\u5B9A\u5236" />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u76EE\u6807\u8FDB\u5EA6 | number | 0 |
type | \u6307\u5B9A canvas \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A 2d | string | - |
size | \u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | number | 100 |
color | \u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272 | string | object | #1989fa |
layer-color | \u8F68\u9053\u989C\u8272 | string | #fff |
fill | \u586B\u5145\u989C\u8272 | string | - |
speed | \u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A value/s\uFF09 | number | 50 |
text | \u6587\u5B57 | string | - |
stroke-width | \u8FDB\u5EA6\u6761\u5BBD\u5EA6 | number | 4 |
clockwise | \u662F\u5426\u987A\u65F6\u9488\u589E\u52A0 | boolean | true |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86fill \uFF0C\u63D2\u69FD\u5185\u5BB9\u4F1A\u88AB\u539F\u751F\u7EC4\u4EF6\u8986\u76D6 |
Layout \u63D0\u4F9B\u4E86van-row
\u548Cvan-col
\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-row": "@vant/weapp/row/index",
+ "van-col": "@vant/weapp/col/index"
+}
+
Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E8624\u5217\u6805\u683C
\uFF0C\u901A\u8FC7\u5728Col
\u4E0A\u6DFB\u52A0span
\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0offset
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002
<van-row>
+ <van-col span="8">span: 8</van-col>
+ <van-col span="8">span: 8</van-col>
+ <van-col span="8">span: 8</van-col>
+</van-row>
+
+<van-row>
+ <van-col span="4">span: 4</van-col>
+ <van-col span="10" offset="4">offset: 4, span: 10</van-col>
+</van-row>
+
+<van-row>
+ <van-col offset="12" span="12">offset: 12, span: 12</van-col>
+</van-row>
+
\u901A\u8FC7gutter
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002
<van-row gutter="20">
+ <van-col span="8">span: 8</van-col>
+ <van-col span="8">span: 8</van-col>
+ <van-col span="8">span: 8</van-col>
+</van-row>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
gutter | \u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09 | string | number | - |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
span | \u5217\u5143\u7D20\u5BBD\u5EA6 | string | number | - |
offset | \u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB | string | number | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u5C06\u4E00\u7EC4\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u7684\u6807\u9898\u53EF\u4EE5\u5C55\u5F00\u6216\u6536\u7F29\u5176\u5185\u5BB9\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-collapse": "@vant/weapp/collapse/index",
+ "van-collapse-item": "@vant/weapp/collapse-item/index"
+}
+
\u901A\u8FC7value
\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0CactiveNames
\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002
<van-collapse value="{{ activeNames }}" bind:change="onChange">
+ <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">
+ \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">
+ \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3" disabled>
+ \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6
+ </van-collapse-item>
+</van-collapse>
+
Page({
+ data: {
+ activeNames: ['1'],
+ },
+ onChange(event) {
+ this.setData({
+ activeNames: event.detail,
+ });
+ },
+});
+
\u901A\u8FC7accordion
\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6activeName
\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002
<van-collapse accordion value="{{ activeName }}" bind:change="onChange">
+ <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">
+ \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">
+ \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3">
+ \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6
+ </van-collapse-item>
+</van-collapse>
+
Page({
+ data: {
+ activeName: '1',
+ },
+ onChange(event) {
+ this.setData({
+ activeName: event.detail,
+ });
+ },
+});
+
van-collapse
\u63D0\u4F9B\u4E86 change
, open
\u548C close
\u4E8B\u4EF6\u3002change
\u4E8B\u4EF6\u5728\u9762\u677F\u5207\u6362\u65F6\u89E6\u53D1\uFF0Copen
\u4E8B\u4EF6\u5728\u9762\u677F\u5C55\u5F00\u65F6\u89E6\u53D1\uFF0Cclose
\u4E8B\u4EF6\u5728\u9762\u677F\u5173\u95ED\u65F6\u89E6\u53D1\u3002
<van-collapse
+ value="{{ activeNames }}"
+ bind:change="onChange"
+ bind:open="onOpen"
+ bind:close="onClose"
+>
+ <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">
+ \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">
+ \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3">
+ \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6
+ </van-collapse-item>
+</van-collapse>
+
Page({
+ data: {
+ activeNames: ['1'],
+ },
+ onChange(event) {
+ this.setData({
+ activeNames: event.detail,
+ });
+ },
+ onOpen(event) {
+ Toast(\`\u5C55\u5F00: \${event.detail}\`);
+ },
+ onClose(event) {
+ Toast(\`\u5173\u95ED: \${event.detail}\`);
+ },
+});
+
<van-collapse value="{{ activeNames }}" bind:change="onChange">
+ <van-collapse-item name="1">
+ <view slot="title">\u6709\u8D5E\u5FAE\u5546\u57CE<van-icon name="question-o" /></view>
+ \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE
+ </van-collapse-item>
+ <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2" icon="shop-o">
+ \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931
+ </van-collapse-item>
+</van-collapse>
+
Page({
+ data: {
+ activeNames: ['1'],
+ },
+ onChange(event) {
+ this.setData({
+ activeNames: event.detail,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name | \u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A(string | number)[] \u624B\u98CE\u7434\u6A21\u5F0F\uFF1Astring | number | - |
accordion | \u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0F | boolean | false |
border | \u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | boolean | true |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
change | \u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1 | activeNames: string | Array |
open | \u5C55\u5F00\u9762\u677F\u65F6\u89E6\u53D1 | currentName: string | number |
close | \u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1 | currentName: string | number |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503C | string | number | index |
title | \u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | string | number | - |
size | \u6807\u9898\u680F\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3Alarge | string | - |
icon | \u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
value | \u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9 | string | number | - |
label | \u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F | string | - |
border | \u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | boolean | true |
is-link | \u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | true |
clickable | \u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u9762\u677F | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u9762\u677F\u5185\u5BB9 |
value | \u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9 |
icon | \u81EA\u5B9A\u4E49icon |
title | \u81EA\u5B9A\u4E49title |
right-icon | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662Farrow |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
content-class | \u5185\u5BB9\u6837\u5F0F\u7C7B |
Vant \u4E2D\u9ED8\u8BA4\u5305\u542B\u4E86\u4E00\u4E9B\u5E38\u7528\u6837\u5F0F\uFF0C\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 className \u7684\u65B9\u5F0F\u4F7F\u7528\u3002
\u5728 app.wxss \u4E2D\u5F15\u5165\u5185\u7F6E\u6837\u5F0F\u3002
@import '@vant/weapp/common/index.wxss';
+
\u5F53\u6587\u672C\u5185\u5BB9\u957F\u5EA6\u8D85\u8FC7\u5BB9\u5668\u6700\u5927\u5BBD\u5EA6\u65F6\uFF0C\u81EA\u52A8\u7701\u7565\u591A\u4F59\u7684\u6587\u672C\u3002
<view class="van-ellipsis">
+ \u8FD9\u662F\u4E00\u6BB5\u5BBD\u5EA6\u9650\u5236 250px \u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
+</view>
+
+<!-- \u6700\u591A\u663E\u793A\u4E24\u884C -->
+<view class="van-multi-ellipsis--l2">
+ \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E24\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
+</view>
+
+<!-- \u6700\u591A\u663E\u793A\u4E09\u884C -->
+<view class="van-multi-ellipsis--l3">
+ \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E09\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
+</view>
+
\u4E3A\u5143\u7D20\u6DFB\u52A0 Retina \u5C4F\u5E55\u4E0B\u7684 1px \u8FB9\u6846\uFF08\u5373 hairline\uFF09\uFF0C\u57FA\u4E8E\u4F2A\u7C7B transform \u5B9E\u73B0\u3002
<!-- \u4E0A\u8FB9\u6846 -->
+<view class="van-hairline--top"></view>
+
+<!-- \u4E0B\u8FB9\u6846 -->
+<view class="van-hairline--bottom"></view>
+
+<!-- \u5DE6\u8FB9\u6846 -->
+<view class="van-hairline--left"></view>
+
+<!-- \u53F3\u8FB9\u6846 -->
+<view class="van-hairline--right"></view>
+
+<!-- \u4E0A\u4E0B\u8FB9\u6846 -->
+<view class="van-hairline--top-bottom"></view>
+
+<!-- \u5168\u8FB9\u6846 -->
+<view class="van-hairline--surround"></view>
+
\u63A8\u8350\u5728 app.wxss \u4E2D\u8BBE\u7F6E\u4EE5\u4E0B\u5168\u5C40\u5B57\u4F53\uFF0C\u4EE5\u4FDD\u8BC1\u5728\u4E0D\u540C\u8BBE\u5907\u4E0A\u63D0\u4F9B\u6700\u4F73\u7684\u89C6\u89C9\u4F53\u9A8C\u3002
page {
+ font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
+ Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
+ sans-serif;
+}
+
\u7528\u4E8E\u914D\u7F6E Vant Weapp \u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F\uFF0C\u4ECE v1.7.0
\u7248\u672C\u5F00\u59CB\u652F\u6301\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-config-provider": "@vant/weapp/config-provider/index"
+}
+
Vant Weapp \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 CSS \u53D8\u91CF \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898\u7B49\u6548\u679C\u3002
\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 .van-button--primary
\u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A
.van-button--primary {
+ color: var(--button-primary-color, #fff);
+ background: var(--button-primary-background-color, #07c160);
+ border: var(--button-border-width, 1px) solid var(
+ --button-primary-border-color,
+ #07c160
+ );
+}
+
\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4EE3\u7801\u4E2D\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0CButton \u7EC4\u4EF6\u7684\u6837\u5F0F\u4F1A\u968F\u4E4B\u53D1\u751F\u6539\u53D8\uFF1A
/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */
+page {
+ --button-primary-background-color: red;
+}
+
ConfigProvider
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8986\u76D6 CSS \u53D8\u91CF\u7684\u80FD\u529B\uFF0C\u4F60\u9700\u8981\u5728\u6839\u8282\u70B9\u5305\u88F9\u4E00\u4E2A ConfigProvider
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 theme-vars
\u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002
<van-config-provider theme-vars="{{ themeVars }}">
+ <van-cell-group>
+ <van-field label="\u8BC4\u5206">
+ <view slot="input" style="width: 100%">
+ <van-rate
+ model:value="{{ rate }}"
+ data-key="rate"
+ bind:change="onChange"
+ />
+ </view>
+ </van-field>
+ <van-field label="\u6ED1\u5757" border="{{ false }}">
+ <view slot="input" style="width: 100%">
+ <van-slider
+ value="{{ slider }}"
+ data-key="slider"
+ bind:change="onChange"
+ />
+ </view>
+ </van-field>
+ </van-cell-group>
+
+ <view style="margin: 16px">
+ <van-button round block type="primary">\u63D0\u4EA4</van-button>
+ </view>
+</van-config-provider>
+
import Page from '../../common/page';
+
+Page({
+ data: {
+ rate: 4,
+ slider: 50,
+ themeVars: {
+ rateIconFullColor: '#07c160',
+ sliderBarHeight: '4px',
+ sliderButtonWidth: '20px',
+ sliderButtonHeight: '20px',
+ sliderActiveBackgroundColor: '#07c160',
+ buttonPrimaryBorderColor: '#07c160',
+ buttonPrimaryBackgroundColor: '#07c160',
+ },
+ },
+
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({
+ [key]: event.detail,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
theme-vars | \u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CF | object | - |
\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-count-down": "@vant/weapp/count-down/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
time
\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002
<van-count-down time="{{ time }}" />
+
Page({
+ data: {
+ time: 30 * 60 * 60 * 1000,
+ },
+});
+
\u901A\u8FC7format
\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002
<van-count-down time="{{ time }}" format="DD \u5929 HH \u65F6 mm \u5206 ss \u79D2" />
+
\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6Emillisecond
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002
<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
+
\u8BBE\u7F6Euse-slot
\u5C5E\u6027\u540E\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u6837\u5F0F\uFF0C\u9700\u8981\u901A\u8FC7bind:change
\u4E8B\u4EF6\u83B7\u53D6timeData
\u5BF9\u8C61\u5E76\u81EA\u884C\u6E32\u67D3\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-count-down use-slot time="{{ time }}" bind:change="onChange">
+ <text class="item">{{ timeData.hours }}</text>
+ <text class="item">{{ timeData.minutes }}</text>
+ <text class="item">{{ timeData.seconds }}</text>
+</van-count-down>
+
Page({
+ data: {
+ time: 30 * 60 * 60 * 1000,
+ timeData: {},
+ },
+
+ onChange(e) {
+ this.setData({
+ timeData: e.detail,
+ });
+ },
+});
+
.item {
+ display: inline-block;
+ width: 22px;
+ margin-right: 5px;
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ background-color: #1989fa;
+ border-radius: 2px;
+}
+
\u901A\u8FC7 selectComponent
\u9009\u62E9\u5668\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528start
\u3001pause
\u3001reset
\u65B9\u6CD5\u3002
<van-count-down
+ class="control-count-down"
+ millisecond
+ time="{{ 3000 }}"
+ auto-start="{{ false }}"
+ format="ss:SSS"
+ bind:finish="finished"
+/>
+
+<van-grid clickable column-num="3">
+ <van-grid-item text="\u5F00\u59CB" icon="play-circle-o" bindclick="start" />
+ <van-grid-item text="\u6682\u505C" icon="pause-circle-o" bindclick="pause" />
+ <van-grid-item text="\u91CD\u7F6E" icon="replay" bindclick="reset" />
+</van-grid>
+
Page({
+ start() {
+ const countDown = this.selectComponent('.control-count-down');
+ countDown.start();
+ },
+
+ pause() {
+ const countDown = this.selectComponent('.control-count-down');
+ countDown.pause();
+ },
+
+ reset() {
+ const countDown = this.selectComponent('.control-count-down');
+ countDown.reset();
+ },
+
+ finished() {
+ Toast('\u5012\u8BA1\u65F6\u7ED3\u675F');
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
time | \u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | number | - |
format | \u65F6\u95F4\u683C\u5F0F\uFF0CDD-\u65E5\uFF0CHH-\u65F6\uFF0Cmm-\u5206\uFF0Css-\u79D2\uFF0CSSS-\u6BEB\u79D2 | string | HH:mm:ss |
auto-start | \u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 | boolean | true |
millisecond | \u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3 | boolean | false |
use-slot | \u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F\u63D2\u69FD | boolean | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:finish | \u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1 | - |
bind:change | \u65F6\u95F4\u53D8\u5316\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728\u5F00\u542Fuse-slot \u540E\u624D\u4F1A\u89E6\u53D1 | timeData |
\u540D\u79F0 | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
days | \u5269\u4F59\u5929\u6570 | number |
hours | \u5269\u4F59\u5C0F\u65F6 | number |
minutes | \u5269\u4F59\u5206\u949F | number |
seconds | \u5269\u4F59\u79D2\u6570 | number |
milliseconds | \u5269\u4F59\u6BEB\u79D2 | number |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
start | - | - | \u5F00\u59CB\u5012\u8BA1\u65F6 |
pause | - | - | \u6682\u505C\u5012\u8BA1\u65F6 |
reset | - | - | \u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5auto-start \u4E3Atrue \uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 |
\u7528\u4E8E\u9009\u62E9\u65F6\u95F4\uFF0C\u652F\u6301\u65E5\u671F\u3001\u65F6\u5206\u7B49\u65F6\u95F4\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-datetime-picker": "@vant/weapp/datetime-picker/index"
+}
+
value
\u4E3A\u65F6\u95F4\u6233\u3002
<van-datetime-picker
+ type="datetime"
+ value="{{ currentDate }}"
+ min-date="{{ minDate }}"
+ max-date="{{ maxDate }}"
+ bind:input="onInput"
+/>
+
Page({
+ data: {
+ minHour: 10,
+ maxHour: 20,
+ minDate: new Date().getTime(),
+ maxDate: new Date(2019, 10, 1).getTime(),
+ currentDate: new Date().getTime(),
+ },
+
+ onInput(event) {
+ this.setData({
+ currentDate: event.detail,
+ });
+ },
+});
+
value
\u4E3A\u65F6\u95F4\u6233\uFF0C\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u5904\u7406\u3002
<van-datetime-picker
+ type="date"
+ value="{{ currentDate }}"
+ bind:input="onInput"
+ min-date="{{ minDate }}"
+ formatter="{{ formatter }}"
+/>
+
Page({
+ data: {
+ currentDate: new Date().getTime(),
+ minDate: new Date().getTime(),
+ formatter(type, value) {
+ if (type === 'year') {
+ return \`\${value}\u5E74\`;
+ }
+ if (type === 'month') {
+ return \`\${value}\u6708\`;
+ }
+ return value;
+ },
+ },
+
+ onInput(event) {
+ this.setData({
+ currentDate: event.detail,
+ });
+ },
+});
+
value
\u4E3A\u65F6\u95F4\u6233\u3002
<van-datetime-picker
+ type="year-month"
+ value="{{ currentDate }}"
+ min-date="{{ minDate }}"
+ bind:input="onInput"
+/>
+
Page({
+ data: {
+ currentDate: new Date().getTime(),
+ minDate: new Date().getTime(),
+ },
+
+ onInput(event) {
+ this.setData({
+ currentDate: event.detail,
+ });
+ },
+});
+
value
\u4E3A\u5B57\u7B26\u4E32\u3002
<van-datetime-picker
+ type="time"
+ value="{{ currentDate }}"
+ min-hour="{{ minHour }}"
+ max-hour="{{ maxHour }}"
+ bind:input="onInput"
+/>
+
Page({
+ data: {
+ currentDate: '12:00',
+ minHour: 10,
+ maxHour: 20,
+ },
+
+ onInput(event) {
+ this.setData({
+ currentDate: event.detail,
+ });
+ },
+});
+
\u901A\u8FC7\u4F20\u5165 filter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u65F6\u95F4\u95F4\u9694\u3002
<van-datetime-picker
+ type="time"
+ value="{{ currentDate }}"
+ filter="{{ filter }}"
+/>
+
Page({
+ data: {
+ currentDate: '12:00',
+ filter(type, options) {
+ if (type === 'minute') {
+ return options.filter((option) => option % 5 === 0);
+ }
+
+ return options;
+ },
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u5F53\u524D\u9009\u4E2D\u503C | string | number | - |
type | \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A date time year-month \u4E0D\u5EFA\u8BAE\u52A8\u6001\u4FEE\u6539 | string | datetime |
min-date | \u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F | number | \u5341\u5E74\u524D |
max-date | \u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F | number | \u5341\u5E74\u540E |
min-hour | \u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B | number | 0 |
max-hour | \u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B | number | 23 |
min-minute | \u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B | number | 0 |
max-minute | \u53EF\u9009\u7684\u6700\u5927\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B | number | 59 |
filter | \u9009\u9879\u8FC7\u6EE4\u51FD\u6570 | (type, values) => values | - |
formatter | \u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570 | (type, value) => value | - |
title | \u9876\u90E8\u680F\u6807\u9898 | string | '' |
show-toolbar | \u662F\u5426\u663E\u793A\u9876\u90E8\u680F | boolean | true |
loading | \u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
item-height | \u9009\u9879\u9AD8\u5EA6 | number | 44 |
confirm-button-text | \u786E\u8BA4\u6309\u94AE\u6587\u5B57 | string | \u786E\u8BA4 |
cancel-button-text | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | \u53D6\u6D88 |
visible-item-count | \u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | number | 6 |
\u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:input | \u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D value |
bind:change | \u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u7EC4\u4EF6\u5B9E\u4F8B |
bind:confirm | \u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D value |
bind:cancel | \u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | - |
\u5728change
\u4E8B\u4EF6\u4E2D\uFF0C\u53EF\u4EE5\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\uFF0C\u5BF9\u7EC4\u4EF6\u8FDB\u884C\u76F8\u5E94\u7684\u66F4\u65B0\u7B49\u64CD\u4F5C\uFF1A
\u51FD\u6570 | \u8BF4\u660E |
---|---|
getColumnValue(index) | \u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C |
setColumnValue(index, value) | \u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C |
getColumnValues(index) | \u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C |
setColumnValues(index, values) | \u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C |
getValues() | \u83B7\u53D6\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u6570\u7EC4 |
setValues(values) | values \u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u8BBE\u7F6E\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
active-class | \u9009\u4E2D\u9879\u6837\u5F0F\u7C7B |
toolbar-class | \u9876\u90E8\u680F\u6837\u5F0F\u7C7B |
column-class | \u5217\u6837\u5F0F\u7C7B |
\u5F39\u51FA\u6A21\u6001\u6846\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-dialog": "@vant/weapp/dialog/index"
+}
+
\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002
<van-dialog id="van-dialog" />
+
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
+
+Dialog.alert({
+ title: '\u6807\u9898',
+ message: '\u5F39\u7A97\u5185\u5BB9',
+}).then(() => {
+ // on close
+});
+
+Dialog.alert({
+ message: '\u5F39\u7A97\u5185\u5BB9',
+}).then(() => {
+ // on close
+});
+
\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u5305\u542B\u53D6\u6D88\u548C\u786E\u8BA4\u6309\u94AE\u3002
<van-dialog id="van-dialog" />
+
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
+
+Dialog.confirm({
+ title: '\u6807\u9898',
+ message: '\u5F39\u7A97\u5185\u5BB9',
+})
+ .then(() => {
+ // on confirm
+ })
+ .catch(() => {
+ // on cancel
+ });
+
\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A round-button
\u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002
<van-dialog id="van-dialog" />
+
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
+
+Dialog.alert({
+ title: '\u6807\u9898',
+ message: '\u5F39\u7A97\u5185\u5BB9',
+ theme: 'round-button',
+}).then(() => {
+ // on close
+});
+
+Dialog.alert({
+ message: '\u5F39\u7A97\u5185\u5BB9',
+ theme: 'round-button',
+}).then(() => {
+ // on close
+});
+
\u901A\u8FC7 beforeClose
\u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u5F39\u7A97\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002
<van-dialog id="van-dialog" />
+
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
+
+const beforeClose = (action) => new Promise((resolve) => {
+ setTimeout(() => {
+ if (action === 'confirm') {
+ resolve(true);
+ } else {
+ // \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C
+ resolve(false);
+ }
+ }, 1000);
+});
+
+Dialog.confirm({
+ title: '\u6807\u9898',
+ message: '\u5F39\u7A97\u5185\u5BB9'
+ beforeClose
+});
+
\u5982\u679C\u9700\u8981\u5728\u5F39\u7A97\u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7EC4\u4EF6\u8C03\u7528\u7684\u65B9\u5F0F\u3002
<van-dialog
+ use-slot
+ title="\u6807\u9898"
+ show="{{ show }}"
+ show-cancel-button
+ confirm-button-open-type="getUserInfo"
+ bind:close="onClose"
+ bind:getuserinfo="getUserInfo"
+>
+ <image src="https://img.yzcdn.cn/1.jpg" />
+</van-dialog>
+
Page({
+ data: {
+ show: true,
+ },
+
+ getUserInfo(event) {
+ console.log(event.detail);
+ },
+
+ onClose() {
+ this.setData({ show: false });
+ },
+});
+
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
Dialog | options | Promise | \u5C55\u793A\u5F39\u7A97 |
Dialog.alert | options | Promise | \u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97 |
Dialog.confirm | options | Promise | \u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97 |
Dialog.setDefaultOptions | options | void | \u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548 |
Dialog.resetDefaultOptions | - | void | \u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548 |
Dialog.close | - | void | \u5173\u95ED\u5F39\u7A97 |
Dialog.stopLoading | - | void | \u505C\u6B62\u6309\u94AE\u7684\u52A0\u8F7D\u72B6\u6001 |
\u901A\u8FC7\u51FD\u6570\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
title | \u6807\u9898 | string | - |
width | \u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 320px |
message | \u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | string | - |
messageAlign | \u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3Aleft right | string | center |
theme | \u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Around-button | string | default |
zIndex | z-index \u5C42\u7EA7 | number | 100 |
className | \u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548 | string | '' |
customStyle | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | '' |
selector | \u81EA\u5B9A\u4E49\u9009\u62E9\u5668 | string | van-dialog |
showConfirmButton | \u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | boolean | true |
showCancelButton | \u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | boolean | false |
confirmButtonText | \u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848 | string | \u786E\u8BA4 |
cancelButtonText | \u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848 | string | \u53D6\u6D88 |
overlay | \u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | boolean | true |
overlayStyle | \u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | object | - |
closeOnClickOverlay | \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97 | boolean | false |
asyncClose | \u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 beforeClose \u5C5E\u6027\u4EE3\u66FF | boolean | false |
beforeClose | \u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | (action) => boolean | Promise<boolean> | - |
context | \u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587 | object | \u5F53\u524D\u9875\u9762 |
transition | \u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3Afade none | string | scale |
confirmButtonOpenType | \u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
\u4F7F\u7528confirmButtonOpenType
\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | open-type |
---|---|---|---|---|
appParameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570 | string | - | launchApp |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en | getUserInfo |
sessionFrom | \u4F1A\u8BDD\u6765\u6E90 | string | - | contact |
businessId | \u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id | number | - | contact |
sendMessageTitle | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898 | string | \u5F53\u524D\u6807\u9898 | contact |
sendMessagePath | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 | contact |
sendMessageImg | sendMessageImg | string | \u622A\u56FE | contact |
showMessageCard | \u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247 | string | false | contact |
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props:
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
show | \u662F\u5426\u663E\u793A\u5F39\u7A97 | boolean | - |
title | \u6807\u9898 | string | - |
width | \u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 320px |
message | \u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | string | - |
theme | \u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Around-button | string | default |
message-align | \u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3Aleft right | string | center |
z-index | z-index \u5C42\u7EA7 | number | 100 |
class-name | \u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548 | string | '' |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | '' |
show-confirm-button | \u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | boolean | true |
show-cancel-button | \u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | boolean | false |
confirm-button-text | \u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848 | string | \u786E\u8BA4 |
cancel-button-text | \u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848 | string | \u53D6\u6D88 |
confirm-button-color | \u786E\u8BA4\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272 | string | #ee0a24 |
cancel-button-color | \u53D6\u6D88\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272 | string | #333 |
overlay | \u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | boolean | true |
overlay-style v1.0.0 | \u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | object | - |
close-on-click-overlay | \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97 | boolean | false |
use-slot | \u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD | boolean | false |
use-title-slot | \u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6807\u9898\u7684\u63D2\u69FD | boolean | false |
async-close | \u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 beforeClose \u5C5E\u6027\u4EE3\u66FF | boolean | false |
before-close | \u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | (action) => boolean | Promise<boolean> | - |
transition | \u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3Afade | string | scale |
confirm-button-open-type | \u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
\u4F7F\u7528confirm-button-open-type
\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | open-type |
---|---|---|---|---|
app-parameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570 | string | - | launchApp |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en | getUserInfo |
session-from | \u4F1A\u8BDD\u6765\u6E90 | string | - | contact |
business-id | \u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id | number | - | contact |
send-message-title | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898 | string | \u5F53\u524D\u6807\u9898 | contact |
send-message-path | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 | contact |
send-message-img | sendMessageImg | string | \u622A\u56FE | contact |
show-message-card | \u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247 | string | false | contact |
\u4E8B\u4EF6 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:close | \u5F39\u7A97\u5173\u95ED\u65F6\u89E6\u53D1 | event.detail: \u89E6\u53D1\u5173\u95ED\u4E8B\u4EF6\u7684\u6765\u6E90\uFF0C \u679A\u4E3E\u4E3A confirm ,cancel ,overlay |
bind:confirm | \u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:cancel | \u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:getuserinfo | \u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C \u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo | - |
bind:contact | \u5BA2\u670D\u6D88\u606F\u56DE\u8C03 | - |
bind:getphonenumber | \u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03 | - |
bind:error | \u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03 | - |
bind:opensetting | \u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49title \u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6
\u7248\u672C\uFF0CES5
\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
"usingComponents": {
+ "van-divider": "@vant/weapp/divider/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
<van-divider />
+
<van-divider hairline />
+
<van-divider dashed />
+
<van-divider contentPosition="center">\u6587\u672C</van-divider>
+<van-divider contentPosition="left">\u6587\u672C</van-divider>
+<van-divider contentPosition="right">\u6587\u672C</van-divider>
+
<van-divider contentPosition="center" textColor="#1989fa">\u6587\u672C\u989C\u8272</van-divider>
+<van-divider contentPosition="center" borderColor="#1989fa">
+ border \u989C\u8272
+</van-divider>
+<van-divider contentPosition="center" fontSize="18">\u5B57\u4F53\u5927\u5C0F</van-divider>
+
<van-divider
+ contentPosition="center"
+ customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
+>
+ \u6587\u672C
+</van-divider>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
dashed | \u865A\u7EBF | boolean | false |
hairline | \u7EC6\u7EBF | boolean | false |
content-position | \u6587\u672C\u4F4D\u7F6E\uFF0Cleft center right | string | - |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
\u9ED8\u8BA4 | \u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9 |
\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6
\u7248\u672C\uFF0CES5
\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
+ "van-dropdown-item": "@vant/weapp/dropdown-item/index"
+}
+
<van-dropdown-menu>
+ <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+ <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+</van-dropdown-menu>
+
Page({
+ data: {
+ option1: [
+ { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
+ { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
+ { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
+ ],
+ option2: [
+ { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },
+ { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },
+ { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },
+ ],
+ value1: 0,
+ value2: 'a',
+ },
+});
+
<van-dropdown-menu>
+ <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+ <van-dropdown-item id="item" title="{{ itemTitle }}">
+ <van-cell title="{{ switchTitle1 }}">
+ <van-switch
+ slot="right-icon"
+ size="24px"
+ style="height: 26px"
+ checked="{{ switch1 }}"
+ active-color="#ee0a24"
+ bind:change="onSwitch1Change"
+ />
+ </van-cell>
+ <van-cell title="{{ switchTitle2 }}">
+ <van-switch
+ slot="right-icon"
+ size="24px"
+ style="height: 26px"
+ checked="{{ switch2 }}"
+ active-color="#ee0a24"
+ bind:change="onSwitch2Change"
+ />
+ </van-cell>
+ <view style="padding: 5px 16px;">
+ <van-button type="danger" block round bind:click="onConfirm">
+ \u786E\u8BA4
+ </van-button>
+ </view>
+ </van-dropdown-item>
+</van-dropdown-menu>
+
Page({
+ data: {
+ switchTitle1: '\u5305\u90AE',
+ switchTitle2: '\u56E2\u8D2D',
+ itemTitle: '\u7B5B\u9009',
+ option1: [
+ { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
+ { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
+ { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
+ ],
+ value1: 0,
+ },
+
+ onConfirm() {
+ this.selectComponent('#item').toggle();
+ },
+
+ onSwitch1Change({ detail }) {
+ this.setData({ switch1: detail });
+ },
+
+ onSwitch2Change({ detail }) {
+ this.setData({ switch2: detail });
+ },
+});
+
<van-dropdown-menu active-color="#1989fa">
+ <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+ <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+</van-dropdown-menu>
+
<van-dropdown-menu direction="up">
+ <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+ <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+</van-dropdown-menu>
+
<van-dropdown-menu>
+ <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
+ <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
+</van-dropdown-menu>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
active-color | \u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272 | string | #ee0a24 |
z-index | \u83DC\u5355\u680F z-index \u5C42\u7EA7 | number | 10 |
duration | \u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | number | 200 |
direction | \u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A up | string | down |
overlay | \u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | boolean | true |
close-on-click-overlay | \u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355 | boolean | true |
close-on-click-outside | \u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8 menu \u540E\u5173\u95ED\u83DC\u5355 | boolean | true |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 value | number | string | - |
title | \u83DC\u5355\u9879\u6807\u9898 | string | \u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57 |
options | \u9009\u9879\u6570\u7EC4 | Option[] | [] |
disabled | \u662F\u5426\u7981\u7528\u83DC\u5355 | boolean | false |
title-class | \u6807\u9898\u989D\u5916\u7C7B\u540D | string | - |
popup-style | \u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F | string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
change | \u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1 | value |
open | \u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | - |
close | \u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | - |
opened | \u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | - |
closed | \u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | - |
\u901A\u8FC7 selectComponent(id) \u53EF\u8BBF\u95EE\u3002
\u65B9\u6CD5\u540D | \u8BF4\u660E | \u53C2\u6570 | \u8FD4\u56DE\u503C |
---|---|---|---|
toggle | \u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20true \u4E3A\u663E\u793A\uFF0Cfalse \u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | show?: boolean | - |
\u952E\u540D | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
text | \u6587\u5B57 | string |
value | \u6807\u8BC6\u7B26 | number | string |
icon | \u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | string |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6
\u7248\u672C\uFF0CES5
\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-empty": "@vant/weapp/empty/index"
+}
+
<van-empty description="\u63CF\u8FF0\u6587\u5B57" />
+
Empty \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u5360\u4F4D\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728\u4E0D\u540C\u4E1A\u52A1\u573A\u666F\u4E0B\u4F7F\u7528\u3002
<!-- \u901A\u7528\u9519\u8BEF -->
+<van-empty image="error" description="\u63CF\u8FF0\u6587\u5B57" />
+<!-- \u7F51\u7EDC\u9519\u8BEF -->
+<van-empty image="network" description="\u63CF\u8FF0\u6587\u5B57" />
+<!-- \u641C\u7D22\u63D0\u793A -->
+<van-empty image="search" description="\u63CF\u8FF0\u6587\u5B57" />
+
\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002
<van-empty
+ class="custom-image"
+ image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+ description="\u63CF\u8FF0\u6587\u5B57"
+/>
+
\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002
<van-empty description="\u63CF\u8FF0\u6587\u5B57">
+ <van-button round type="danger" class="bottom-button">\u6309\u94AE</van-button>
+</van-empty>
+
+<style>
+ .bottom-button {
+ width: 160px;
+ height: 40px;
+ }
+</style>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
image | \u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A error network search \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | string | default |
description | \u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57 | string | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9 |
image | \u81EA\u5B9A\u4E49\u56FE\u6807 |
description | \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 |
\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-field": "@vant/weapp/field/index"
+}
+
<van-cell-group>
+ <van-field
+ value="{{ value }}"
+ placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
+ border="{{ false }}"
+ bind:change="onChange"
+ />
+</van-cell-group>
+
Page({
+ data: {
+ value: '',
+ },
+
+ onChange(event) {
+ // event.detail \u4E3A\u5F53\u524D\u8F93\u5165\u7684\u503C
+ console.log(event.detail);
+ },
+});
+
\u6700\u4F4E\u57FA\u7840\u5E93\u7248\u672C\u5728 2.9.3 \u4EE5\u4E0A\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A\u3002
<van-cell-group>
+ <van-field
+ model:value="{{ value }}"
+ placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
+ border="{{ false }}"
+ />
+</van-cell-group>
+
Page({
+ data: {
+ value: '',
+ },
+});
+
\u6839\u636Etype
\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\u3002
<van-cell-group>
+ <van-field
+ value="{{ username }}"
+ required
+ clearable
+ label="\u7528\u6237\u540D"
+ icon="question-o"
+ placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
+ bind:click-icon="onClickIcon"
+ />
+
+ <van-field
+ value="{{ password }}"
+ type="password"
+ label="\u5BC6\u7801"
+ placeholder="\u8BF7\u8F93\u5165\u5BC6\u7801"
+ required
+ border="{{ false }}"
+ />
+</van-cell-group>
+
<van-cell-group>
+ <van-field
+ value="\u8F93\u5165\u6846\u5DF2\u7981\u7528"
+ label="\u7528\u6237\u540D"
+ left-icon="contact"
+ disabled
+ border="{{ false }}"
+ />
+</van-cell-group>
+
\u901A\u8FC7error
\u6216\u8005error-message
\u5C5E\u6027\u589E\u52A0\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002
<van-cell-group>
+ <van-field
+ value="{{ username }}"
+ label="\u7528\u6237\u540D"
+ placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
+ error
+ />
+ <van-field
+ value="{{ phone }}"
+ label="\u624B\u673A\u53F7"
+ placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"
+ error-message="\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"
+ border="{{ false }}"
+ />
+</van-cell-group>
+
\u53EF\u4EE5\u901A\u8FC7input-align
\u5C5E\u6027\u8BBE\u7F6E\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002
<van-cell-group>
+ <van-field
+ value="{{ username3 }}"
+ label="\u7528\u6237\u540D"
+ placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
+ input-align="right"
+ />
+</van-cell-group>
+
\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7autosize
\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002
<van-cell-group>
+ <van-field
+ value="{{ message }}"
+ label="\u7559\u8A00"
+ type="textarea"
+ placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"
+ autosize
+ border="{{ false }}"
+ />
+</van-cell-group>
+
\u901A\u8FC7 button slot \u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002
<van-cell-group>
+ <van-field
+ value="{{ sms }}"
+ center
+ clearable
+ label="\u77ED\u4FE1\u9A8C\u8BC1\u7801"
+ placeholder="\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"
+ border="{{ false }}"
+ use-button-slot
+ >
+ <van-button slot="button" size="small" type="primary">
+ \u53D1\u9001\u9A8C\u8BC1\u7801
+ </van-button>
+ </van-field>
+</van-cell-group>
+
\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u805A\u7126\u65F6\u4F1A\u5C06\u539F\u751F\u7684\u8F93\u5165\u6846\u8986\u76D6\u5728\u5BF9\u5E94\u4F4D\u7F6E\u4E0A\uFF0C\u5BFC\u81F4\u4E86\u8FD9\u4E2A\u73B0\u8C61\u7684\u4EA7\u751F\u3002
\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002
\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u9075\u5FAA\u539F\u751F\u7EC4\u4EF6\u7684\u9650\u5236\uFF0C\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B\u539F\u751F\u7EC4\u4EF6\u8BF4\u660E\u3002
\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 textarea \u7EC4\u4EF6\u5728 Android \u548C iOS \u4E2D\u9ED8\u8BA4\u6837\u5F0F\u4E0D\u540C\uFF0C\u5728 iOS \u4E2D\u4F1A\u6709\u9ED8\u8BA4\u7684 padding
\uFF0C\u4E14\u65E0\u6CD5\u7F6E 0\u3002
\u540C\u65F6 placeholder-style
\u5BF9 vertical-align
\u3001line-height
\u7B49\u5927\u91CF css \u5C5E\u6027\u90FD\u4E0D\u751F\u6548\u3002
\u8FD9\u4E00\u7CFB\u5217\u7684\u95EE\u9898\u5BFC\u81F4\u4E86 placeholder \u5728\u771F\u673A\u4E0A\u53EF\u80FD\u4F1A\u51FA\u73B0\u504F\u79FB\u3002
\u5FAE\u4FE1\u5DF2\u7ECF\u5728 2.10.0
\u57FA\u7840\u5E93\u7248\u672C\u540E\u652F\u6301\u79FB\u9664\u9ED8\u8BA4\u7684 padding
\uFF0C\u4F46\u4F4E\u7248\u672C\u4ECD\u6709\u95EE\u9898\u3002\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B \u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002
\u8FD9\u662F\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u5982\u679C\u9700\u8981\u517C\u5BB9\u624B\u5199\u8F93\u5165\u6CD5\u7684\u573A\u666F\uFF0C\u53EF\u4EE5\u5728 blur
\u4E8B\u4EF6\u4E2D\u53D6\u5230\u8F93\u5165\u7684\u503C\u3002
\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
label | \u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C | string | - |
size | \u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large | string | - |
value | \u5F53\u524D\u8F93\u5165\u7684\u503C | string | number | - |
type | \u53EF\u8BBE\u7F6E\u4E3A\u4EFB\u610F\u539F\u751F\u7C7B\u578B, \u5982 number idcard textarea digit | string | text |
fixed | \u5982\u679C type \u4E3A textarea \u4E14\u5728\u4E00\u4E2A position:fixed \u7684\u533A\u57DF\uFF0C\u9700\u8981\u663E\u793A\u6307\u5B9A\u5C5E\u6027 fixed \u4E3A true | boolean | false |
focus | \u83B7\u53D6\u7126\u70B9 | boolean | false |
border | \u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | boolean | true |
disabled | \u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | boolean | false |
readonly | \u662F\u5426\u53EA\u8BFB | boolean | false |
clearable | \u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6 | boolean | false |
clickable | \u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | false |
required | \u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | boolean | false |
center | \u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | boolean | false |
password | \u662F\u5426\u662F\u5BC6\u7801\u7C7B\u578B | boolean | false |
title-width | \u6807\u9898\u5BBD\u5EA6 | string | 6.2em |
maxlength | \u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6 | number | -1 |
placeholder | \u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26 | string | - |
placeholder-style | \u6307\u5B9A placeholder \u7684\u6837\u5F0F | string | - |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
is-link | \u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | boolean | false |
arrow-direction | \u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | string | - |
show-word-limit | \u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6Emaxlength \u5C5E\u6027 | boolean | false |
error | \u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | boolean | false |
error-message | \u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A | string | '' |
error-message-align | \u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | string | '' |
input-align | \u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | string | left |
autosize | \u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C \u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C \u5355\u4F4D\u4E3A px | boolean | object | false |
left-icon | \u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
right-icon | \u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
confirm-type | \u8BBE\u7F6E\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u7684\u6587\u5B57\uFF0C\u4EC5\u5728 type='text' \u65F6\u751F\u6548 | string | done |
confirm-hold | \u70B9\u51FB\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u65F6\u662F\u5426\u4FDD\u6301\u952E\u76D8\u4E0D\u6536\u8D77\uFF0C\u5728 type='textarea' \u65F6\u65E0\u6548 | boolean | false |
hold-keyboard | focus \u65F6\uFF0C\u70B9\u51FB\u9875\u9762\u7684\u65F6\u5019\u4E0D\u6536\u8D77\u952E\u76D8 | boolean | false |
cursor-spacing | \u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BB | number | 50 |
adjust-position | \u952E\u76D8\u5F39\u8D77\u65F6\uFF0C\u662F\u5426\u81EA\u52A8\u4E0A\u63A8\u9875\u9762 | boolean | true |
show-confirm-bar | \u662F\u5426\u663E\u793A\u952E\u76D8\u4E0A\u65B9\u5E26\u6709\u201D\u5B8C\u6210\u201C\u6309\u94AE\u90A3\u4E00\u680F\uFF0C\u53EA\u5BF9 textarea \u6709\u6548 | boolean | true |
selection-start | \u5149\u6807\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-end \u642D\u914D\u4F7F\u7528 | number | -1 |
selection-end | \u5149\u6807\u7ED3\u675F\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-start \u642D\u914D\u4F7F\u7528 | number | -1 |
auto-focus | \u81EA\u52A8\u805A\u7126\uFF0C\u62C9\u8D77\u952E\u76D8 | boolean | false |
disable-default-padding | \u662F\u5426\u53BB\u6389 iOS \u4E0B\u7684\u9ED8\u8BA4\u5185\u8FB9\u8DDD\uFF0C\u53EA\u5BF9 textarea \u6709\u6548 | boolean | true |
cursor | \u6307\u5B9A focus \u65F6\u7684\u5149\u6807\u4F4D\u7F6E | number | -1 |
clear-trigger v1.8.4 | \u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | string | focus |
always-embed v1.9.2 | \u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548) | boolean | false |
\u4E8B\u4EF6 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:input | \u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u8F93\u5165\u503C |
bind:change | \u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u8F93\u5165\u503C |
bind:confirm | \u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u8F93\u5165\u503C |
bind:click-icon | \u70B9\u51FB\u5C3E\u90E8\u56FE\u6807\u65F6\u89E6\u53D1 | - |
bind:focus | \u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; event.detail.height: \u952E\u76D8\u9AD8\u5EA6 |
bind:blur | \u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1 | event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; event.detail.cursor: \u6E38\u6807\u4F4D\u7F6E(\u5982\u679C type \u4E0D\u4E3A textarea \uFF0C\u503C\u4E3A 0 ) |
bind:clear | \u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1 | - |
bind:click-input | \u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1 | - |
bind:linechange | \u8F93\u5165\u6846\u884C\u6570\u53D8\u5316\u65F6\u8C03\u7528\uFF0C\u53EA\u5BF9 textarea \u6709\u6548 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
bind:keyboardheightchange | \u952E\u76D8\u9AD8\u5EA6\u53D1\u751F\u53D8\u5316\u7684\u65F6\u5019\u89E6\u53D1\u6B64\u4E8B\u4EF6 | event.detail = { height: height, duration: duration } |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
label | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6807\u7B7E\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86label \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
left-icon | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807 |
right-icon | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807 |
button | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE |
input | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
label-class | \u5DE6\u4FA7\u6587\u672C\u6837\u5F0F\u7C7B |
input-class | \u8F93\u5165\u6846\u6837\u5F0F\u7C7B |
right-icon-class | \u53F3\u4FA7\u56FE\u6807\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u4E3A\u5546\u54C1\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-goods-action": "@vant/weapp/goods-action/index",
+ "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
+ "van-goods-action-button": "@vant/weapp/goods-action-button/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
<van-goods-action>
+ <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" bind:click="onClickIcon" />
+ <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" bind:click="onClickIcon" />
+ <van-goods-action-button
+ text="\u52A0\u5165\u8D2D\u7269\u8F66"
+ type="warning"
+ bind:click="onClickButton"
+ />
+ <van-goods-action-button text="\u7ACB\u5373\u8D2D\u4E70" bind:click="onClickButton" />
+</van-goods-action>
+
Page({
+ onClickIcon() {
+ Toast('\u70B9\u51FB\u56FE\u6807');
+ },
+
+ onClickButton() {
+ Toast('\u70B9\u51FB\u6309\u94AE');
+ },
+});
+
\u8BBE\u7F6Edot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Einfo
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-goods-action>
+ <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" dot />
+ <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
+ <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
+ <van-goods-action-button text="\u52A0\u5165\u8D2D\u7269\u8F66" type="warning" />
+ <van-goods-action-button text="\u7ACB\u5373\u8D2D\u4E70" />
+</van-goods-action>
+
\u901A\u8FC7color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165linear-gradient
\u6E10\u53D8\u8272\u3002
<van-goods-action>
+ <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" />
+ <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
+ <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
+ <van-goods-action-button color="#be99ff" text="\u52A0\u5165\u8D2D\u7269\u8F66" type="warning" />
+ <van-goods-action-button color="#7232dd" text="\u7ACB\u5373\u8D2D\u4E70" />
+</van-goods-action>
+
\u901A\u8FC7plain
\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002
<van-goods-action>
+ <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" />
+ <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
+ <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
+ <van-goods-action-button color="#7232dd" text="\u52A0\u5165\u8D2D\u7269" type="warning" />
+ <van-goods-action-button plain color="#7232dd" text="\u7ACB\u5373\u8D2D\u4E70" />
+</van-goods-action>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
safe-area-inset-bottom | \u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB | boolean | true |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
text | \u6309\u94AE\u6587\u5B57 | string | - |
icon | \u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u89C1icon \u7EC4\u4EF6 | string | - |
info | \u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F | string | number | - |
url | \u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | string | - |
link-type | \u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunch | string | navigateTo |
id | \u6807\u8BC6\u7B26 | string | - |
disabled | \u662F\u5426\u7981\u7528\u6309\u94AE | boolean | false |
loading | \u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
open-type | \u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
app-parameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570 | string | - |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en |
session-from | \u4F1A\u8BDD\u6765\u6E90 | string | - |
send-message-title | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898 | string | \u5F53\u524D\u6807\u9898 |
send-message-path | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 |
send-message-img | sendMessageImg | string | \u622A\u56FE |
show-message-card | \u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247 | string | false |
class-prefix v1.10.1 | \u7C7B\u540D\u524D\u7F00 | string | van-icon |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
text | \u6309\u94AE\u6587\u5B57 | string | - |
color | \u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272 | string | - |
url | \u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | string | - |
link-type | \u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunch | string | navigateTo |
id | \u6807\u8BC6\u7B26 | string | - |
type | \u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary warning danger | string | danger |
plain | \u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE | boolean | false |
size | \u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A normal large small mini | string | normal |
disabled | \u662F\u5426\u7981\u7528\u6309\u94AE | boolean | false |
loading | \u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
open-type | \u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 | string | - |
app-parameter | \u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570 | string | - |
lang | \u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587 | string | en |
session-from | \u4F1A\u8BDD\u6765\u6E90 | string | - |
send-message-title | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898 | string | \u5F53\u524D\u6807\u9898 |
send-message-path | \u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84 | string | \u5F53\u524D\u5206\u4EAB\u8DEF\u5F84 |
send-message-img | sendMessageImg | string | \u622A\u56FE |
show-message-card | \u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247 | string | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
icon | \u81EA\u5B9A\u4E49\u56FE\u6807 |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u6309\u94AE\u663E\u793A\u5185\u5BB9 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
icon-class | \u56FE\u6807\u6837\u5F0F\u7C7B |
text-class | \u6587\u5B57\u6837\u5F0F\u7C7B |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u5BAB\u683C\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u628A\u9875\u9762\u5206\u9694\u6210\u7B49\u5BBD\u5EA6\u7684\u533A\u5757\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-grid": "@vant/weapp/grid/index",
+ "van-grid-item": "@vant/weapp/grid-item/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u901A\u8FC7icon
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0Ctext
\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002
<van-grid>
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+</van-grid>
+
\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7column-num
\u81EA\u5B9A\u4E49\u5217\u6570\u3002
<van-grid column-num="3">
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 6 }}" />
+</van-grid>
+
\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002
<van-grid column-num="3" border="{{ false }}">
+ <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
+ <image
+ style="width: 100%; height: 90px;"
+ src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"
+ />
+ </van-grid-item>
+</van-grid>
+
\u8BBE\u7F6Esquare
\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002
<van-grid square>
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 8 }}" />
+</van-grid>
+
\u901A\u8FC7gutter
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002
<van-grid gutter="{{ 10 }}">
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 8 }}" />
+</van-grid>
+
\u5C06direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3Ahorizontal
\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002
<van-grid direction="horizontal" column-num="2">
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+ <van-grid-item icon="photo-o" text="\u6587\u5B57" />
+</van-grid>
+
\u53EF\u4EE5\u901A\u8FC7url
\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7link-type
\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002
<van-grid clickable column-num="2">
+ <van-grid-item
+ icon="home-o"
+ link-type="navigateTo"
+ url="/pages/dashboard/index"
+ text="Navigate \u8DF3\u8F6C"
+ />
+ <van-grid-item
+ icon="search"
+ link-type="reLaunch"
+ url="/pages/dashboard/index"
+ text="ReLaunch \u8DF3\u8F6C"
+ />
+</van-grid>
+
\u8BBE\u7F6Edot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Ebadge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-grid column-num="2">
+ <van-grid-item icon="home-o" text="\u6587\u5B57" dot />
+ <van-grid-item icon="search" text="\u6587\u5B57" badge="99+" />
+</van-grid>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
column-num | \u5217\u6570 | number | 4 |
icon-size v1.3.2 | \u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | 28px |
gutter | \u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 0 |
border | \u662F\u5426\u663E\u793A\u8FB9\u6846 | boolean | true |
center | \u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793A | boolean | true |
square | \u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62 | boolean | false |
clickable | \u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988 | boolean | false |
direction | \u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | string | vertical |
reverse v1.7.0 | \u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6E | boolean | false |
use-slot | \u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD | boolean | false |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
text | \u6587\u5B57 | string | - |
icon | \u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
icon-color | \u56FE\u6807\u989C\u8272 | string | - |
icon-prefix v1.7.0 | \u7B2C\u4E09\u65B9\u56FE\u6807\u524D\u7F00 | string | van-icon |
dot | \u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | boolean | false |
badge | \u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | string | number | - |
url | \u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | string | - |
link-type | \u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunch | string | navigateTo |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6Euse-slot \u5C5E\u6027 |
icon | \u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86use-slot \u6216\u8005icon \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
text | \u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86use-slot \u6216\u8005text \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
content-class | \u5185\u5BB9\u6837\u5F0F\u7C7B |
icon-class | \u56FE\u6807\u6837\u5F0F\u7C7B |
text-class | \u6587\u672C\u6837\u5F0F\u7C7B |
\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon \u5C5E\u6027\u5F15\u7528\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-icon": "@vant/weapp/icon/index"
+}
+
Icon
\u7684name
\u5C5E\u6027\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\u3002
<van-icon name="close" />
+<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
+
\u8BBE\u7F6Edot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Einfo
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-icon name="chat" dot />
+<van-icon name="chat" info="9" />
+<van-icon name="chat" info="99+" />
+
\u8BBE\u7F6Ecolor
\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u989C\u8272\u3002
<van-icon name="chat" color="red" />
+
\u8BBE\u7F6Esize
\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u5927\u5C0F\u3002
<van-icon name="chat" size="50px" />
+
\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002\u4F8B\u5982\uFF0C\u53EF\u4EE5\u5728 app.wxss
\u6587\u4EF6\u4E2D\u5F15\u5165\u3002
/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */
+@font-face {
+ font-family: 'my-icon';
+ src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+ font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+ content: '\\e626';
+}
+
<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->
+<van-icon class-prefix="my-icon" name="extra" />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | string | - |
dot | \u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | boolean | false |
info | \u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u63D0\u793A | string | number | - |
color | \u56FE\u6807\u989C\u8272 | string | inherit |
size | \u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px \uFF0C2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | inherit |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
class-prefix | \u7C7B\u540D\u524D\u7F00 | string | van-icon |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u8FD9\u4E2A\u662F\u5F00\u53D1\u8005\u5DE5\u5177\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u53EF\u4EE5\u5FFD\u7565\uFF0C\u5177\u4F53\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863 - \u6CE8\u610F\u4E8B\u9879\u7B2C 5 \u6761\u3002
\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-image": "@vant/weapp/image/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F image \u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6Esrc
\u3001width
\u3001height
\u7B49\u539F\u751F\u5C5E\u6027\u3002
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+
\u901A\u8FC7fit
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-image
+ width="10rem"
+ height="10rem"
+ fit="contain"
+ src="https://img.yzcdn.cn/vant/cat.jpeg"
+/>
+
\u901A\u8FC7round
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14fit
\u4E3Acontain
\u6216scale-down
\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002
<van-image
+ round
+ width="10rem"
+ height="10rem"
+ src="https://img.yzcdn.cn/vant/cat.jpeg"
+/>
+
\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u5728\u5373\u5C06\u8FDB\u5165\u4E00\u5B9A\u8303\u56F4\uFF08\u4E0A\u4E0B\u4E09\u5C4F\uFF09\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u3002
<van-image
+ width="100"
+ height="100"
+ lazy-load
+ src="https://img.yzcdn.cn/vant/cat.jpeg"
+/>
+
Image
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7loading
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image use-loading-slot>
+ <van-loading slot="loading" type="spinner" size="20" vertical />
+</van-image>
+
Image
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7error
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image use-error-slot>
+ <text slot="error">\u52A0\u8F7D\u5931\u8D25</text>
+</van-image>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
src | \u56FE\u7247\u94FE\u63A5 | string | - |
fit | \u56FE\u7247\u586B\u5145\u6A21\u5F0F | string | fill |
alt | \u66FF\u4EE3\u6587\u672C | string | - |
width | \u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | - |
height | \u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | - |
radius | \u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 0 |
round | \u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62 | boolean | false |
lazy-load | \u662F\u5426\u61D2\u52A0\u8F7D | boolean | false |
show-error | \u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793A | boolean | true |
show-loading | \u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793A | boolean | true |
use-error-slot | \u662F\u5426\u4F7F\u7528 error \u63D2\u69FD | boolean | false |
use-loading-slot | \u662F\u5426\u4F7F\u7528 loading \u63D2\u69FD | boolean | false |
show-menu-by-longpress | \u662F\u5426\u5F00\u542F\u957F\u6309\u56FE\u7247\u663E\u793A\u8BC6\u522B\u5C0F\u7A0B\u5E8F\u7801\u83DC\u5355 | boolean | false |
\u540D\u79F0 | \u542B\u4E49 |
---|---|
contain | \u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765 |
cover | \u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9 |
fill | \u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20 |
widthFix | \u7F29\u653E\u6A21\u5F0F\uFF0C\u5BBD\u5EA6\u4E0D\u53D8\uFF0C\u9AD8\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8 |
heightFix | \u7F29\u653E\u6A21\u5F0F\uFF0C\u9AD8\u5EA6\u4E0D\u53D8\uFF0C\u5BBD\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8 |
none | \u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1 | event: Event |
bind:load | \u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1 | event: Event |
bind:error | \u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1 | event: Event |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
loading | \u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9 |
error | \u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
image-class | \u56FE\u7247\u6837\u5F0F\u7C7B |
loading-class | loading \u6837\u5F0F\u7C7B |
error-class | error \u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-index-bar": "@vant/weapp/index-bar/index",
+ "van-index-anchor": "@vant/weapp/index-anchor/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684IndexAnchor
\u951A\u70B9\u4F4D\u7F6E\u3002
<van-index-bar>
+ <view>
+ <van-index-anchor index="A" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ </view>
+
+ <view>
+ <van-index-anchor index="B" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ </view>
+
+ ...
+</van-index-bar>
+
\u53EF\u4EE5\u901A\u8FC7index-list
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002
<van-index-bar index-list="{{ indexList }}">
+ <view>
+ <van-index-anchor index="1">\u6807\u98981</van-index-anchor>
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ </view>
+
+ <view>
+ <van-index-anchor index="2">\u6807\u98982</van-index-anchor>
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ <van-cell title="\u6587\u672C" />
+ </view>
+
+ ...
+</van-index-bar>
+
Page({
+ data: {
+ indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
---|---|---|---|---|
index-list | \u7D22\u5F15\u5B57\u7B26\u5217\u8868 | string[] | number[] | A-Z | - |
z-index | z-index \u5C42\u7EA7 | number | 1 | - |
sticky | \u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876 | boolean | true | - |
sticky-offset-top | \u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB | number | 0 | - |
highlight-color | \u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272 | string | #07c160 | - |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
---|---|---|---|---|
use-slot | \u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD | boolean | false | - |
index | \u7D22\u5F15\u5B57\u7B26 | string | number | - | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
select | \u9009\u4E2D\u5B57\u7B26\u65F6\u89E6\u53D1 | index: \u7D22\u5F15\u5B57\u7B26 |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26 |
\u7531\u4E8E <IndexBar />
\u5185\u90E8\u4F7F\u7528 wx.pageScrollTo \u6EDA\u52A8\u5230\u6307\u5B9A\u4F4D\u7F6E\uFF0C\u56E0\u6B64\u53EA\u652F\u6301\u9875\u9762\u7EA7\u6EDA\u52A8\uFF0C\u65E0\u6CD5\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D\u5D4C\u5957\u4F7F\u7528\uFF0C\u4F8B\u5982\uFF1Aview
\u4F7F\u7528 overflow: scroll;
\u6216\u8005 scroll-view
\uFF0C\u5177\u4F53\u53EF\u67E5\u770B\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863\u3002\u5386\u53F2 issue: #4252
\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-loading": "@vant/weapp/loading/index"
+}
+
<van-loading /> <van-loading type="spinner" />
+
<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
+
<van-loading size="24px">\u52A0\u8F7D\u4E2D...</van-loading>
+
<van-loading size="24px" vertical>\u52A0\u8F7D\u4E2D...</van-loading>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
color | \u989C\u8272 | string | #c9c9c9 |
type | \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | string | circular |
size | \u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | string | number | 30px |
text-size v1.0.0 | \u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A\u4E3A px | string | number | 14px |
vertical v1.0.0 | \u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9 | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u52A0\u8F7D\u6587\u6848 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-nav-bar": "@vant/weapp/nav-bar/index"
+}
+
<van-nav-bar
+ title="\u6807\u9898"
+ left-text="\u8FD4\u56DE"
+ right-text="\u6309\u94AE"
+ left-arrow
+ bind:click-left="onClickLeft"
+ bind:click-right="onClickRight"
+/>
+
Page({
+ onClickLeft() {
+ wx.showToast({ title: '\u70B9\u51FB\u8FD4\u56DE', icon: 'none' });
+ },
+ onClickRight() {
+ wx.showToast({ title: '\u70B9\u51FB\u6309\u94AE', icon: 'none' });
+ },
+});
+
\u901A\u8FC7 slot \u5B9A\u5236\u5185\u5BB9\u3002
<van-nav-bar title="\u6807\u9898" left-text="\u8FD4\u56DE" left-arrow>
+ <van-icon name="search" slot="right" />
+</van-nav-bar>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
title | \u6807\u9898 | string | '' |
left-text | \u5DE6\u4FA7\u6587\u6848 | string | '' |
right-text | \u53F3\u4FA7\u6587\u6848 | string | '' |
left-arrow | \u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934 | boolean | false |
fixed | \u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8 | boolean | false |
placeholder | \u56FA\u5B9A\u5728\u9876\u90E8\u65F6\u662F\u5426\u5F00\u542F\u5360\u4F4D | boolean | false |
border | \u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846 | boolean | true |
z-index | \u5143\u7D20 z-index | number | 1 |
custom-style | \u6839\u8282\u70B9\u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
safe-area-inset-top | \u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09 | boolean | true |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49\u6807\u9898 |
left | \u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9 |
right | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click-left | \u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:click-right | \u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
title-class | \u6807\u9898\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-notice-bar": "@vant/weapp/notice-bar/index"
+}
+
<van-notice-bar
+ left-icon="volume-o"
+ text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
+/>
+
\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 scrollable
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002
<!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E -->
+<van-notice-bar scrollable text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
+
+<!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E -->
+<van-notice-bar
+ scrollable="{{ false }}"
+ text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
+/>
+
\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E wrapable
\u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002
<van-notice-bar
+ wrapable
+ scrollable="{{ false }}"
+ text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
+/>
+
\u901A\u77E5\u680F\u652F\u6301 closeable
\u548C link
\u4E24\u79CD\u6A21\u5F0F\u3002
<!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE -->
+<van-notice-bar mode="closeable" text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
+
+<!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 -->
+<van-notice-bar mode="link" text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
+
\u901A\u8FC7 color
\u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 background
\u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002
<van-notice-bar
+ color="#1989fa"
+ background="#ecf9ff"
+ left-icon="info-o"
+ text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"
+/>
+
\u4F7F\u7528speed
\u5C5E\u6027\u63A7\u5236\u6EDA\u52A8\u901F\u7387\u3002
<van-notice-bar
+ text="{{ text }}"
+ speed="{{speedValue}}"
+ left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+/>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
mode | \u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A closeable link | string | '' |
text | \u901A\u77E5\u6587\u672C\u5185\u5BB9 | string | '' |
color | \u901A\u77E5\u6587\u672C\u989C\u8272 | string | #ed6a0c |
background | \u6EDA\u52A8\u6761\u80CC\u666F | string | #fffbe8 |
left-icon | \u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | string | - |
delay | \u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (ms) | number | 1 |
speed | \u6EDA\u52A8\u901F\u7387 (px/s) | number | 60 |
scrollable | \u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542F | boolean | - |
wrapable | \u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548 | boolean | false |
open-type | \u5FAE\u4FE1\u5F00\u653E\u80FD\u529B | string | navigate |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | event: Event |
bind:close | \u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | event: Event |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u901A\u77E5\u6587\u672C\u5185\u5BB9\uFF0C\u4EC5\u5728 text \u5C5E\u6027\u4E3A\u7A7A\u65F6\u6709\u6548 |
left-icon | \u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807 |
right-icon | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\u540D\u79F0 | \u9ED8\u8BA4\u503C | \u63CF\u8FF0 |
---|---|---|
--notice-bar-height | 40px | - |
--notice-bar-padding | 0 var(--van-padding-md) | - |
--notice-bar-wrapable-padding | var(--van-padding-xs) var(--van-padding-md) | - |
--notice-bar-text-color | var(--van-orange-dark) | - |
--notice-bar-font-size | var(--van-font-size-md) | - |
--notice-bar-line-height | 24px | - |
--notice-bar-background-color | var(--van-orange-light) | - |
--notice-bar-icon-size | 16px | - |
--notice-bar-icon-min-width | 24px | - |
\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-notify": "@vant/weapp/notify/index"
+}
+
import Notify from 'path/to/@vant/weapp/dist/notify/notify';
+
+Notify('\u901A\u77E5\u5185\u5BB9');
+
<!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u5BF9\u5E94\u7684\u8282\u70B9 -->
+<van-notify id="van-notify" />
+
\u652F\u6301primary
\u3001success
\u3001warning
\u3001danger
\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3Adanger
\u3002
// \u4E3B\u8981\u901A\u77E5
+Notify({ type: 'primary', message: '\u901A\u77E5\u5185\u5BB9' });
+
+// \u6210\u529F\u901A\u77E5
+Notify({ type: 'success', message: '\u901A\u77E5\u5185\u5BB9' });
+
+// \u5371\u9669\u901A\u77E5
+Notify({ type: 'danger', message: '\u901A\u77E5\u5185\u5BB9' });
+
+// \u8B66\u544A\u901A\u77E5
+Notify({ type: 'warning', message: '\u901A\u77E5\u5185\u5BB9' });
+
\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u548C\u5C55\u793A\u65F6\u957F\u3002
Notify({
+ message: '\u81EA\u5B9A\u4E49\u989C\u8272',
+ color: '#ad0000',
+ background: '#ffe1e1',
+});
+
+Notify({
+ message: '\u81EA\u5B9A\u4E49\u65F6\u957F',
+ duration: 1000,
+});
+
Notify({
+ message: '\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668',
+ duration: 1000,
+ selector: '#custom-selector',
+});
+
<!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u81EA\u5B9A\u4E49\u8282\u70B9 -->
+<van-notify id="custom-selector" />
+
\u65B9\u6CD5\u540D | \u8BF4\u660E | \u53C2\u6570 | \u8FD4\u56DE\u503C |
---|---|---|---|
Notify | \u5C55\u793A\u63D0\u793A | options | message | notify \u5B9E\u4F8B |
Notify.clear | \u5173\u95ED\u63D0\u793A | options | void |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type v1.0.0 | \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning | string | danger |
message v1.0.0 | \u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | string | '' |
duration | \u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931 | number | 3000 |
selector | \u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668 | string | van-notify |
color | \u5B57\u4F53\u989C\u8272 | string | #fff |
top | \u9876\u90E8\u8DDD\u79BB | number | 0 |
background | \u80CC\u666F\u989C\u8272 | string | - |
context | \u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587 | object | \u5F53\u524D\u9875\u9762 |
onClick | \u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |
onOpened | \u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |
onClose | \u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |
safeAreaInsetTop | \u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09 | boolean | false |
\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-overlay": "@vant/weapp/overlay/index"
+}
+
<van-button type="primary" bind:click="onClickShow">\u663E\u793A\u906E\u7F69\u5C42</van-button>
+<van-overlay show="{{ show }}" bind:click="onClickHide" />
+
Page({
+ data: {
+ show: false,
+ },
+
+ onClickShow() {
+ this.setData({ show: true });
+ },
+
+ onClickHide() {
+ this.setData({ show: false });
+ },
+});
+
\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002
<van-button type="primary" bind:click="onClickShow">\u5D4C\u5165\u5185\u5BB9</van-button>
+<van-overlay show="{{ show }}" bind:click="onClickHide">
+ <view class="wrapper">
+ <view class="block" catch:tap="noop" />
+ </view>
+</van-overlay>
+
Page({
+ data: {
+ show: false,
+ },
+
+ onClickShow() {
+ this.setData({ show: true });
+ },
+
+ onClickHide() {
+ this.setData({ show: false });
+ },
+
+ noop() {},
+});
+
.wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.block {
+ width: 120px;
+ height: 120px;
+ background-color: #fff;
+}
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
show | \u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | boolean | false |
z-index | z-index \u5C42\u7EA7 | string | number | 1 |
duration | \u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2 | string | number | 0.3 |
class-name | \u81EA\u5B9A\u4E49\u7C7B\u540D | string | - |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
lock-scroll v1.7.3 | \u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8 | boolean | true |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9 |
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-panel": "@vant/weapp/panel/index"
+}
+
\u9762\u677F\u53EA\u662F\u4E00\u4E2A\u5BB9\u5668\uFF0C\u91CC\u9762\u53EF\u4EE5\u653E\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\u3002
<van-panel title="\u6807\u9898" desc="\u63CF\u8FF0\u4FE1\u606F" status="\u72B6\u6001">
+ <view>\u5185\u5BB9</view>
+</van-panel>
+
\u4F7F\u7528slot
\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-panel title="\u6807\u9898" desc="\u63CF\u8FF0\u4FE1\u606F" status="\u72B6\u6001">
+ <view>\u5185\u5BB9</view>
+ <view slot="footer">
+ <van-button size="small">\u6309\u94AE</van-button>
+ <van-button size="small" type="danger">\u6309\u94AE</van-button>
+ </view>
+</van-panel>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
title | \u6807\u9898 | string | - |
desc | \u63CF\u8FF0 | string | - |
status | \u72B6\u6001 | string | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u5185\u5BB9 |
header | \u81EA\u5B9A\u4E49 header\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title \u3001desc \u3001status \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
footer | \u81EA\u5B9A\u4E49 footer |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
header-class | \u5934\u90E8\u6837\u5F0F\u7C7B |
footer-class | \u5E95\u90E8\u6837\u5F0F\u7C7B |
\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u548C\u591A\u5217\u7EA7\u8054\uFF0C\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-picker": "@vant/weapp/picker/index"
+}
+
<van-picker columns="{{ columns }}" bind:change="onChange" />
+
import Toast from 'path/to/@vant/weapp/dist/toast/toast';
+
+Page({
+ data: {
+ columns: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
+ },
+
+ onChange(event) {
+ const { picker, value, index } = event.detail;
+ Toast(\`\u5F53\u524D\u503C\uFF1A\${value}, \u5F53\u524D\u7D22\u5F15\uFF1A\${index}\`);
+ },
+});
+
\u5355\u5217\u9009\u62E9\u5668\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7default-index
\u5C5E\u6027\u8BBE\u7F6E\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u503C\u3002
<van-picker
+ columns="{{ columns }}"
+ default-index="{{ 2 }}"
+ bind:change="onChange"
+/>
+
<van-picker
+ show-toolbar
+ title="\u6807\u9898"
+ columns="{{ columns }}"
+ bind:cancel="onCancel"
+ bind:confirm="onConfirm"
+/>
+
import Toast from 'path/to/@vant/weapp/dist/toast/toast';
+
+Page({
+ data: {
+ columns: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
+ },
+
+ onConfirm(event) {
+ const { picker, value, index } = event.detail;
+ Toast(\`\u5F53\u524D\u503C\uFF1A\${value}, \u5F53\u524D\u7D22\u5F15\uFF1A\${index}\`);
+ },
+
+ onCancel() {
+ Toast('\u53D6\u6D88');
+ },
+});
+
<van-picker columns="{{ columns }}" bind:change="onChange" />
+
const citys = {
+ \u6D59\u6C5F: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
+ \u798F\u5EFA: ['\u798F\u5DDE', '\u53A6\u95E8', '\u8386\u7530', '\u4E09\u660E', '\u6CC9\u5DDE'],
+};
+
+Page({
+ data: {
+ columns: [
+ {
+ values: Object.keys(citys),
+ className: 'column1',
+ },
+ {
+ values: citys['\u6D59\u6C5F'],
+ className: 'column2',
+ defaultIndex: 2,
+ },
+ ],
+ },
+
+ onChange(event) {
+ const { picker, value, index } = event.detail;
+ picker.setColumnValues(1, citys[value[0]]);
+ },
+});
+
\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled \u6765\u7981\u7528\u8BE5\u9009\u9879\u3002
<van-picker columns="{{ columns }}" />
+
Page({
+ data: {
+ columns: [
+ { text: '\u676D\u5DDE', disabled: true },
+ { text: '\u5B81\u6CE2' },
+ { text: '\u6E29\u5DDE' },
+ ],
+ },
+});
+
\u5F53 Picker \u6570\u636E\u662F\u901A\u8FC7\u5F02\u6B65\u83B7\u53D6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading
\u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002
<van-picker columns="{{ columns }}" loading />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
columns | \u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636E | Array | [] |
show-toolbar | \u662F\u5426\u663E\u793A\u9876\u90E8\u680F | boolean | false |
toolbar-position | \u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3Abottom | string | top |
title | \u9876\u90E8\u680F\u6807\u9898 | string | '' |
loading | \u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
value-key | \u9009\u9879\u5BF9\u8C61\u4E2D\uFF0C\u6587\u5B57\u5BF9\u5E94\u7684 key | string | text |
item-height | \u9009\u9879\u9AD8\u5EA6 | number | 44 |
confirm-button-text | \u786E\u8BA4\u6309\u94AE\u6587\u5B57 | string | \u786E\u8BA4 |
cancel-button-text | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | \u53D6\u6D88 |
visible-item-count | \u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | number | 6 |
default-index | \u5355\u5217\u9009\u62E9\u5668\u7684\u9ED8\u8BA4\u9009\u4E2D\u9879\u7D22\u5F15\uFF0C \u591A\u5217\u9009\u62E9\u5668\u8BF7\u53C2\u8003\u4E0B\u65B9\u7684 Columns \u914D\u7F6E | number | 0 |
Picker \u7EC4\u4EF6\u7684\u4E8B\u4EF6\u4F1A\u6839\u636E columns \u662F\u5355\u5217\u6216\u591A\u5217\u8FD4\u56DE\u4E0D\u540C\u7684\u53C2\u6570\u3002
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:confirm | \u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 \u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 |
bind:cancel | \u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 \u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 |
bind:change | \u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \u5355\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 \u591A\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15 |
\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0Ccolumns
\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0Bkey
\u3002
key | \u8BF4\u660E |
---|---|
values | \u5217\u4E2D\u5BF9\u5E94\u7684\u5907\u9009\u503C |
defaultIndex | \u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
active-class | \u9009\u4E2D\u9879\u6837\u5F0F\u7C7B |
toolbar-class | \u9876\u90E8\u680F\u6837\u5F0F\u7C7B |
column-class | \u5217\u6837\u5F0F\u7C7B |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
getValues | - | values | \u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C |
setValues | values | - | \u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C |
getIndexes | - | indexes | \u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 |
setIndexes | indexes | - | \u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15 |
getColumnValue | columnIndex | value | \u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C |
setColumnValue | columnIndex, value | - | \u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C |
getColumnIndex | columnIndex | optionIndex | \u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15 |
setColumnIndex | columnIndex, optionIndex | - | \u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15 |
getColumnValues | columnIndex | values | \u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879 |
setColumnValues | columnIndex, values | - | \u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879 |
\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-popup": "@vant/weapp/popup/index"
+}
+
\u901A\u8FC7show
\u5C5E\u6027\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002
<van-cell title="\u5C55\u793A\u5F39\u51FA\u5C42" is-link bind:click="showPopup" />
+
+<van-popup show="{{ show }}" bind:close="onClose">\u5185\u5BB9</van-popup>
+
Page({
+ data: {
+ show: false,
+ },
+
+ showPopup() {
+ this.setData({ show: true });
+ },
+
+ onClose() {
+ this.setData({ show: false });
+ },
+});
+
\u901A\u8FC7position
\u5C5E\u6027\u8BBE\u7F6E\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3Atop
\u3001bottom
\u3001left
\u3001right
\u3002
<van-popup
+ show="{{ show }}"
+ position="top"
+ custom-style="height: 20%;"
+ bind:close="onClose"
+/>
+
\u8BBE\u7F6Ecloseable
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7close-icon
\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528close-icon-position
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002
<van-popup
+ show="{{ show }}"
+ closeable
+ position="bottom"
+ custom-style="height: 20%"
+ bind:close="onClose"
+/>
+
+<!-- \u81EA\u5B9A\u4E49\u56FE\u6807 -->
+<van-popup
+ show="{{ show }}"
+ closeable
+ close-icon="close"
+ position="bottom"
+ custom-style="height: 20%"
+ bind:close="onClose"
+/>
+
+<!-- \u56FE\u6807\u4F4D\u7F6E -->
+<van-popup
+ show="{{ show }}"
+ closeable
+ close-icon-position="top-left"
+ position="bottom"
+ custom-style="height: 20%"
+ bind:close="onClose"
+/>
+
\u8BBE\u7F6Eround
\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002
<van-popup
+ show="{{ show }}"
+ round
+ position="bottom"
+ custom-style="height: 20%"
+ bind:close="onClose"
+/>
+
\u4F7F\u7528\u7EC4\u4EF6\u65F6\uFF0C\u4F1A\u53D1\u73B0\u5185\u5BB9\u90E8\u5206\u6EDA\u52A8\u5230\u5E95\u65F6\uFF0C\u7EE7\u7EED\u5212\u52A8\u4F1A\u5BFC\u81F4\u5E95\u5C42\u9875\u9762\u7684\u6EDA\u52A8\uFF0C\u8FD9\u5C31\u662F\u6EDA\u52A8\u7A7F\u900F\u3002
\u76EE\u524D\uFF0C\u7EC4\u4EF6\u53EF\u4EE5\u901A\u8FC7 lock-scroll
\u5C5E\u6027\u5904\u7406\u90E8\u5206\u6EDA\u52A8\u7A7F\u900F\u95EE\u9898\u3002 \u4F46\u7531\u4E8E\u5C0F\u7A0B\u5E8F\u81EA\u8EAB\u539F\u56E0\uFF0C\u5F39\u7A97\u5185\u5BB9\u533A\u57DF\u4ECD\u4F1A\u51FA\u73B0\u6EDA\u52A8\u7A7F\u900F\u3002 \u4E0D\u8FC7\uFF0C\u6211\u4EEC\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4E00\u4E2A\u63A8\u8350\u65B9\u6848\u4EE5\u5B8C\u6574\u89E3\u51B3\u6EDA\u52A8\u7A7F\u900F\uFF1A
\u5F53\u5C0F\u7A0B\u5E8F\u57FA\u7840\u5E93\u6700\u4F4E\u7248\u672C\u5728 2.9.0 \u4EE5\u4E0A\u65F6\uFF0C\u5373\u53EF\u4F7F\u7528 page-meta \u7EC4\u4EF6\u52A8\u6001\u4FEE\u6539\u9875\u9762\u6837\u5F0F
<!-- page-meta \u53EA\u80FD\u662F\u9875\u9762\u5185\u7684\u7B2C\u4E00\u4E2A\u8282\u70B9 -->
+<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
+
+<van-popup show="{{ show }}" catch:touchstart />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
show | \u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42 | boolean | false |
z-index | z-index \u5C42\u7EA7 | number | 100 |
overlay | \u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | boolean | true |
position | \u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom right left | string | center |
duration | \u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2 | number | object | 300 |
round | \u662F\u5426\u663E\u793A\u5706\u89D2 | boolean | false |
custom-style | \u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F | string | '' |
overlay-style | \u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | string | '' |
close-on-click-overlay | \u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | boolean | true |
closeable | \u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | boolean | false |
close-icon | \u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | string | cross |
safe-area-inset-bottom | \u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB | boolean | true |
safe-area-inset-top | \u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09 | boolean | false |
lock-scroll v1.7.3 | \u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | boolean | true |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:close | \u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | - |
bind:click-overlay | \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | - |
bind:before-enter | \u8FDB\u5165\u524D\u89E6\u53D1 | - |
bind:enter | \u8FDB\u5165\u4E2D\u89E6\u53D1 | - |
bind:after-enter | \u8FDB\u5165\u540E\u89E6\u53D1 | - |
bind:before-leave | \u79BB\u5F00\u524D\u89E6\u53D1 | - |
bind:leave | \u79BB\u5F00\u4E2D\u89E6\u53D1 | - |
bind:after-leave | \u79BB\u5F00\u540E\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-progress": "@vant/weapp/progress/index"
+}
+
\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528percentage
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002
<van-progress percentage="50" />
+
\u901A\u8FC7stroke-width
\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002
<van-progress :percentage="50" stroke-width="8" />
+
\u8BBE\u7F6Einactive
\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002
<van-progress inactive percentage="50" />
+
\u53EF\u4EE5\u4F7F\u7528pivot-text
\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0Ccolor
\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002
<van-progress pivot-text="\u6A59\u8272" color="#f2826a" percentage="25" />
+
+<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" percentage="50" />
+
+<van-progress
+ percentage="75"
+ pivot-text="\u7D2B\u8272"
+ pivot-color="#7232dd"
+ color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
inactive | \u662F\u5426\u7F6E\u7070 | boolean | false |
percentage | \u8FDB\u5EA6\u767E\u5206\u6BD4 | number | 0 |
stroke-width | \u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 4px |
show-pivot | \u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57 | boolean | true |
color | \u8FDB\u5EA6\u6761\u989C\u8272 | string | #1989fa |
text-color | \u8FDB\u5EA6\u6587\u5B57\u989C\u8272 | string | #fff |
track-color | \u8F68\u9053\u989C\u8272 | string | #e5e5e5 |
pivot-text | \u6587\u5B57\u663E\u793A | string | \u767E\u5206\u6BD4\u6587\u5B57 |
pivot-color | \u6587\u5B57\u80CC\u666F\u8272 | string | \u4E0E\u8FDB\u5EA6\u6761\u989C\u8272\u4E00\u81F4 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-radio": "@vant/weapp/radio/index",
+ "van-radio-group": "@vant/weapp/radio-group/index"
+}
+
\u901A\u8FC7value
\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name \u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
Page({
+ data: {
+ radio: '1',
+ },
+
+ onChange(event) {
+ this.setData({
+ radio: event.detail,
+ });
+ },
+});
+
\u5C06direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3Ahorizontal
\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-radio-group
+ value="{{ radio }}"
+ bind:change="onChange"
+ direction="horizontal"
+>
+ <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u901A\u8FC7disabled
\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728Radio
\u4E0A\u8BBE\u7F6Ediabled
\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002
<van-radio-group value="{{ radio }}" disabled bind:change="onChange">
+ <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u5C06shape
\u5C5E\u6027\u8BBE\u7F6E\u4E3Asquare
\uFF0C\u5355\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio name="1" shape="square">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2" shape="square">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u901A\u8FC7checked-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio name="1" checked-color="#07c160">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2" checked-color="#07c160">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u901A\u8FC7icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u901A\u8FC7icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u9700\u8981\u8BBE\u7F6Euse-icon-slot
\u5C5E\u6027\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio use-icon-slot value="{{ radio }}" name="1">
+ \u81EA\u5B9A\u4E49\u56FE\u6807
+ <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
+ </van-radio>
+ <van-radio use-icon-slot value="{{ radio }}" name="2">
+ \u81EA\u5B9A\u4E49\u56FE\u6807
+ <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
+ </van-radio>
+</van-radio-group>
+
Page({
+ data: {
+ radio: true,
+ icon: {
+ normal: '//img.yzcdn.cn/icon-normal.png',
+ active: '//img.yzcdn.cn/icon-active.png',
+ },
+ },
+ onChange(event) {
+ this.setData({
+ radio: event.detail,
+ });
+ },
+});
+
\u901A\u8FC7\u8BBE\u7F6Elabel-disabled
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u5355\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>
+ <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>
+</van-radio-group>
+
\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165Cell
\u548CCellGroup
\u7EC4\u4EF6\u3002
<van-radio-group value="{{ radio }}" bind:change="onChange">
+ <van-cell-group>
+ <van-cell title="\u5355\u9009\u6846 1" clickable data-name="1" bind:click="onClick">
+ <van-radio slot="right-icon" name="1" />
+ </van-cell>
+ <van-cell title="\u5355\u9009\u6846 2" clickable data-name="2" bind:click="onClick">
+ <van-radio slot="right-icon" name="2" />
+ </van-cell>
+ </van-cell-group>
+</van-radio-group>
+
Page({
+ data: {
+ radio: '1',
+ },
+
+ onChange(event) {
+ this.setData({
+ radio: event.detail,
+ });
+ },
+
+ onClick(event) {
+ const { name } = event.currentTarget.dataset;
+ this.setData({
+ radio: name,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
value | \u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26 | any | - |
disabled | \u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846 | boolean | false |
direction v1.6.7 | \u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | string | vertical |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u8BC6\u7B26 | string | - |
shape | \u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | string | round |
disabled | \u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | boolean | false |
label-disabled | \u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FB | boolean | false |
label-position | \u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | string | right |
icon-size | \u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 20px |
checked-color | \u9009\u4E2D\u72B6\u6001\u989C\u8272 | string | #1989fa |
use-icon-slot | \u662F\u5426\u4F7F\u7528 icon \u63D2\u69FD | boolean | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D\u9009\u4E2D\u9879\u7684 name |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
icon-class | \u56FE\u6807\u6837\u5F0F\u7C7B |
label-class | \u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \u5F53\u524D\u9009\u4E2D\u9879\u7684 name |
\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-rate": "@vant/weapp/rate/index"
+}
+
<van-rate value="{{ value }}" bind:change="onChange" />
+
Page({
+ data: {
+ value: 3,
+ },
+
+ onChange(event) {
+ this.setData({
+ value: event.detail,
+ });
+ },
+});
+
<van-rate
+ value="{{ value }}"
+ icon="like"
+ void-icon="like-o"
+ bind:change="onChange"
+/>
+
<van-rate
+ value="{{ value }}"
+ size="{{ 25 }}"
+ color="#ffd21e"
+ void-icon="star"
+ void-color="#eee"
+ bind:change="onChange"
+/>
+
<van-rate
+ value="{{ value }}"
+ allow-half
+ void-icon="star"
+ void-color="#eee"
+ bind:change="onChange"
+/>
+
Page({
+ data: {
+ value: 2.5,
+ },
+
+ onChange(event) {
+ this.setData({
+ value: event.detail,
+ });
+ },
+});
+
<van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
+
<van-rate disabled value="{{ value }}" bind:change="onChange" />
+
<van-rate readonly value="{{ value }}" bind:change="onChange" />
+
\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 change
\u4E8B\u4EF6\u3002
<van-rate value="{{ value }}" bind:change="onChange" />
+
Page({
+ data: {
+ value: 2,
+ },
+
+ onChange(event) {
+ Toast('\u5F53\u524D\u503C\uFF1A' + event.detail);
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
value | \u5F53\u524D\u5206\u503C | number | - |
count | \u56FE\u6807\u603B\u6570 | number | 5 |
size | \u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | string | number | 20px |
gutter | \u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | string | number | 4px |
color | \u9009\u4E2D\u65F6\u7684\u989C\u8272 | string | #ffd21e |
void-color | \u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272 | string | #c7c7c7 |
icon | \u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | star |
void-icon | \u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | star-o |
allow-half | \u662F\u5426\u5141\u8BB8\u534A\u9009 | boolean | false |
readonly | \u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001 | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u8BC4\u5206 | boolean | false |
disabled-color | \u7981\u7528\u65F6\u7684\u989C\u8272 | string | #bdbdbd |
touchable | \u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206 | boolean | true |
\u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | event.detail:\u5F53\u524D\u5206\u503C |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
icon-class | \u56FE\u6807\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-search": "@vant/weapp/search/index"
+}
+
van-search
\u4E2D\uFF0Cvalue \u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\u3002background \u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002
<van-search value="{{ value }}" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />
+
van-search
\u63D0\u4F9B\u4E86 search \u548C cancel \u4E8B\u4EF6\u3002search \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22\u6309\u94AE\u89E6\u53D1\u3002cancel \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002
<van-search
+ value="{{ value }}"
+ placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
+ show-action
+ bind:search="onSearch"
+ bind:cancel="onCancel"
+/>
+
\u901A\u8FC7 input-align
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002
<van-search
+ value="{{ value }}"
+ input-align="center"
+ placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
+/>
+
\u901A\u8FC7 disabled
\u5C5E\u6027\u53EF\u4EE5\u5C06\u7EC4\u4EF6\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002
<van-search disabled value="{{ value }}" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />
+
\u901A\u8FC7background
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7shape
\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3Around
\u3002
<van-search
+ value="{{ value }}"
+ shape="round"
+ background="#4fc08d"
+ placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
+/>
+
van-search
\u652F\u6301\u81EA\u5B9A\u4E49\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\uFF0C\u4F7F\u7528\u540D\u5B57\u4E3A action \u7684 slot\uFF0C\u5E76\u8BBE\u7F6E use-action-slot \u4E3A true \u5373\u53EF\u3002
<van-search
+ value="{{ value }}"
+ label="\u5730\u5740"
+ placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
+ use-action-slot
+ bind:change="onChange"
+ bind:search="onSearch"
+>
+ <view slot="action" bind:tap="onClick">\u641C\u7D22</view>
+</van-search>
+
Page({
+ data: {
+ value: '',
+ },
+ onChange(e) {
+ this.setData({
+ value: e.detail,
+ });
+ },
+ onSearch() {
+ Toast('\u641C\u7D22' + this.data.value);
+ },
+ onClick() {
+ Toast('\u641C\u7D22' + this.data.value);
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
label | \u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C | string | - |
shape | \u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round | string | square |
value | \u5F53\u524D\u8F93\u5165\u7684\u503C | string | number | - |
background | \u641C\u7D22\u6846\u80CC\u666F\u8272 | string | #f2f2f2 |
show-action | \u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AE | boolean | false |
action-text v1.0.0 | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | \u53D6\u6D88 |
focus | \u83B7\u53D6\u7126\u70B9 | boolean | false |
error | \u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | boolean | false |
readonly | \u662F\u5426\u53EA\u8BFB | boolean | false |
clearable | \u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6 | boolean | true |
clear-trigger v1.8.4 | \u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | string | focus |
clear-icon v1.8.4 | \u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | string | clear |
maxlength | \u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6 | number | -1 |
use-action-slot | \u662F\u5426\u4F7F\u7528 action slot | boolean | false |
placeholder | \u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26 | string | - |
placeholder-style | \u6307\u5B9A\u5360\u4F4D\u7B26\u7684\u6837\u5F0F | string | - |
input-align | \u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | string | left |
use-left-icon-slot | \u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807 slot | boolean | false |
use-right-icon-slot | \u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807 slot | boolean | false |
left-icon | \u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-left-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09 | string | search |
right-icon | \u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-right-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09 | string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:search | \u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u8F93\u5165\u503C |
bind:change | \u8F93\u5165\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u8F93\u5165\u503C |
bind:cancel | \u53D6\u6D88\u641C\u7D22\u641C\u7D22\u65F6\u89E6\u53D1 | - |
bind:focus | \u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | - |
bind:blur | \u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1 | - |
bind:clear | \u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1 | - |
bind:click-input | \u70B9\u51FB\u641C\u7D22\u533A\u57DF\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
action | \u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u53F3\u4FA7\u6309\u94AE\uFF0C\u9700\u8981\u5728use-action-slot \u4E3A true \u65F6\u624D\u4F1A\u663E\u793A |
label | \u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C |
left-icon | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728use-left-icon-slot \u4E3A true \u65F6\u624D\u4F1A\u663E\u793A |
right-icon | \u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728use-right-icon-slot \u4E3A true \u65F6\u624D\u4F1A\u663E\u793A |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
field-class | \u641C\u7D22\u6846\u6837\u5F0F\u7C7B |
input-class | \u8F93\u5165\u6846\u6837\u5F0F\u7C7B |
cancel-class | \u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B |
\u5E95\u90E8\u5F39\u8D77\u7684\u5206\u4EAB\u9762\u677F\uFF0C\u7528\u4E8E\u5C55\u793A\u5404\u5206\u4EAB\u6E20\u9053\u5BF9\u5E94\u7684\u64CD\u4F5C\u6309\u94AE\uFF0C\u4E0D\u542B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-share-sheet": "@vant/weapp/share-sheet/index"
+}
+
\u5206\u4EAB\u9762\u677F\u901A\u8FC7 options
\u5C5E\u6027\u6765\u5B9A\u4E49\u5206\u4EAB\u9009\u9879\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-cell title="\u663E\u793A\u5206\u4EAB\u9762\u677F" bind:click="onClick" />
+<van-share-sheet
+ show="{{ showShare }}"
+ title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
+ options="{{ options }}"
+ bind:select="onSelect"
+ bind:close="onClose"
+/>
+
Page({
+ data: {
+ showShare: false,
+ options: [
+ { name: '\u5FAE\u4FE1', icon: 'wechat', openType: 'share' },
+ { name: '\u5FAE\u535A', icon: 'weibo' },
+ { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },
+ { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
+ { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
+ ],
+ },
+
+ onClick(event) {
+ this.setData({ showShare: true });
+ },
+
+ onClose() {
+ this.setData({ showShare: false });
+ },
+
+ onSelect(event) {
+ Toast(event.detail.name);
+ this.onClose();
+ },
+});
+
\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 options
\u5B9A\u4E49\u4E3A\u6570\u7EC4\u5D4C\u5957\u7684\u683C\u5F0F\uFF0C\u6BCF\u4E2A\u5B50\u6570\u7EC4\u4F1A\u4F5C\u4E3A\u4E00\u884C\u9009\u9879\u5C55\u793A\u3002
<van-share-sheet
+ show="{{ showShare }}"
+ title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
+ options="{{ options }}"
+/>
+
Page({
+ data: {
+ showShare: false,
+ options: [
+ [
+ { name: '\u5FAE\u4FE1', icon: 'wechat' },
+ { name: '\u5FAE\u535A', icon: 'weibo' },
+ { name: 'QQ', icon: 'qq' },
+ ],
+ [
+ { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },
+ { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
+ { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
+ ],
+ ],
+ },
+});
+
\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 icon
\u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002
<van-share-sheet show="{{ showShare }}" options="{{ options }}" />
+
Page({
+ data: {
+ showShare: false,
+ options: [
+ {
+ name: '\u540D\u79F0',
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
+ },
+ {
+ name: '\u540D\u79F0',
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
+ },
+ {
+ name: '\u540D\u79F0',
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
+ },
+ ],
+ },
+});
+
\u901A\u8FC7 description
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 options
\u5185\u8BBE\u7F6E description
\u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002
<van-share-sheet
+ show="{{ showShare }}"
+ options="{{ options }}"
+ title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
+ description="\u63CF\u8FF0\u4FE1\u606F"
+/>
+
Page({
+ data: {
+ showShare: false,
+ options: [
+ { name: '\u5FAE\u4FE1', icon: 'wechat' },
+ { name: '\u5FAE\u535A', icon: 'weibo' },
+ {
+ name: '\u590D\u5236\u94FE\u63A5',
+ icon: 'link',
+ description: '\u63CF\u8FF0\u4FE1\u606F',
+ },
+ { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
+ { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
+ ],
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
options | \u5206\u4EAB\u9009\u9879 | Option[] | [] |
title | \u9876\u90E8\u6807\u9898 | string | - |
cancel-text | \u53D6\u6D88\u6309\u94AE\u6587\u5B57 | string | '\u53D6\u6D88' |
description | \u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57 | string | - |
duration | \u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | number | string | 300 |
overlay | \u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | boolean | true |
close-on-click-overlay | \u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | boolean | true |
safe-area-inset-bottom | \u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | boolean | true |
options
\u5C5E\u6027\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
name | \u5206\u4EAB\u6E20\u9053\u540D\u79F0 | string |
description | \u5206\u4EAB\u9009\u9879\u63CF\u8FF0 | string |
icon | \u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A qq link weibo wechat poster qrcode weapp-qrcode wechat-moments \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | string |
openType | \u6309\u94AE open-type \uFF0C\u53EF\u7528\u4E8E\u5B9E\u73B0\u5206\u4EAB\u529F\u80FD\uFF0C\u53EF\u9009\u503C\u4E3A share | string |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:select | \u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1 | option: Option, index: number |
bind:close | \u5173\u95ED\u65F6\u89E6\u53D1 | - |
bind:cancel | \u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:click-overlay | \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898 |
description | \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 |
\u5782\u76F4\u5C55\u793A\u7684\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-sidebar": "@vant/weapp/sidebar/index",
+ "van-sidebar-item": "@vant/weapp/sidebar-item/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u901A\u8FC7\u5728van-sidebar
\u4E0A\u8BBE\u7F6EactiveKey
\u5C5E\u6027\u6765\u63A7\u5236\u9009\u4E2D\u9879\u3002
<van-sidebar active-key="{{ activeKey }}">
+ <van-sidebar-item title="\u6807\u7B7E\u540D" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" />
+</van-sidebar>
+
Page({
+ data: {
+ activeKey: 0,
+ },
+});
+
\u8BBE\u7F6Edot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Ebadge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-sidebar active-key="{{ activeKey }}">
+ <van-sidebar-item title="\u6807\u7B7E\u540D" dot />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" badge="5" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" badge="99+" />
+</van-sidebar>
+
\u901A\u8FC7disabled
\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002
<van-sidebar active-key="{{ activeKey }}">
+ <van-sidebar-item title="\u6807\u7B7E\u540D" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" disabled />
+ <van-sidebar-item title="\u6807\u7B7E\u540D" />
+</van-sidebar>
+
\u8BBE\u7F6Echange
\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002
<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+ <van-sidebar-item title="\u6807\u7B7E\u540D 1" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D 2" />
+ <van-sidebar-item title="\u6807\u7B7E\u540D 3" />
+</van-sidebar>
+
+<van-notify id="van-notify" />
+
import Notify from '@vant/weapp/dist/notify/notify';
+
+Page({
+ data: {
+ activeKey: 0,
+ },
+
+ onChange(event) {
+ Notify({ type: 'primary', message: event.detail });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
activeKey | \u9009\u4E2D\u9879\u7684\u7D22\u5F15 | string | number | 0 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
change | \u5207\u6362\u5FBD\u7AE0\u65F6\u89E6\u53D1 | \u5F53\u524D\u9009\u4E2D\u5FBD\u7AE0\u7684\u7D22\u5F15 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
title | \u5185\u5BB9 | string | '' |
dot | \u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | boolean | false |
info | \u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9\uFF08\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 badge \u5C5E\u6027\uFF09 | string | number | '' |
badge v1.5.0 | \u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | string | number | '' |
disabled | \u662F\u5426\u7981\u7528\u8BE5\u9879 | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
title | \u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title \u5C5E\u6027\u5219\u4E0D\u751F\u6548 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
click | \u70B9\u51FB\u5FBD\u7AE0\u65F6\u89E6\u53D1 | event.detail \u4E3A\u5F53\u524D\u5FBD\u7AE0\u7684\u7D22\u5F15 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-skeleton": "@vant/weapp/skeleton/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u901A\u8FC7title
\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7row
\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002
<van-skeleton title row="3" />
+
\u901A\u8FC7avatar
\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002
<van-skeleton title avatar row="3" />
+
\u5C06loading
\u5C5E\u6027\u8BBE\u7F6E\u6210false
\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793ASkeleton
\u7684\u5B50\u7EC4\u4EF6\u3002
<van-skeleton title avatar row="3" loading="{{ loading }}">
+ <view>\u5B9E\u9645\u5185\u5BB9</view>
+</van-skeleton>
+
Page({
+ data: {
+ loading: true,
+ },
+ onReady() {
+ this.setData({
+ loading: false,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
row | \u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570 | number | 0 |
row-width | \u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6 | string | string[] | 100% |
title | \u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE | boolean | false |
title-width | \u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6 | string | number | 40% |
avatar | \u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE | boolean | false |
avatar-size | \u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F | string | number | 32px |
avatar-shape | \u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3Asquare | string | round |
loading | \u662F\u5426\u663E\u793A\u5360\u4F4D\u56FE\uFF0C\u4F20false \u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9 | boolean | true |
animate | \u662F\u5426\u5F00\u542F\u52A8\u753B | boolean | true |
\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-slider": "@vant/weapp/slider/index"
+}
+
<van-slider value="50" bind:change="onChange" />
+
Page({
+ onChange(event) {
+ wx.showToast({
+ icon: 'none',
+ title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
+ });
+ },
+});
+
\u6DFB\u52A0 range
\u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD value
\u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002
<van-slider value="{{ 10, 50 }}" range @change="onChange" />
+
Page({
+ onChange(event) {
+ wx.showToast({
+ icon: 'none',
+ title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
+ });
+ },
+});
+
<van-slider min="-50" max="50" />
+
<van-slider value="50" disabled />
+
<van-slider value="50" step="10" />
+
<van-slider value="50" bar-height="4px" active-color="#ee0a24" />
+
<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
+ <view class="custom-button" slot="button">{{ currentValue }}/100</view>
+</van-slider>
+
Page({
+ data: {
+ currentValue: 50,
+ },
+
+ onDrag(event) {
+ this.setData({
+ currentValue: event.detail.value,
+ });
+ },
+});
+
\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002
<view style="height: 150px;">
+ <van-slider value="50" vertical bind:change="onChange" />
+ <van-slider
+ value="{{ [10, 50] }}"
+ range
+ vertical
+ style="margin-left: 100px;"
+ bind:change="onChange"
+ />
+</view>
+
Page({
+ onChange(event) {
+ wx.showToast({
+ icon: 'none',
+ title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
value | \u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0F | number | number[] | 0 |
disabled | \u662F\u5426\u7981\u7528\u6ED1\u5757 | boolean | false |
max | \u6700\u5927\u503C | number | 100 |
min | \u6700\u5C0F\u503C | number | 0 |
step | \u6B65\u957F | number | 1 |
bar-height | \u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | string | number | 2px |
active-color | \u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272 | string | #1989fa |
inactive-color | \u8FDB\u5EA6\u6761\u9ED8\u8BA4\u989C\u8272 | string | #e5e5e5 |
use-slot-button | \u662F\u5426\u4F7F\u7528\u6309\u94AE\u63D2\u69FD | boolean | false |
range v1.8.4 | \u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F | boolean | false |
vertical v1.8.5 | \u662F\u5426\u5782\u76F4\u5C55\u793A | boolean | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:drag | \u62D6\u52A8\u8FDB\u5EA6\u6761\u65F6\u89E6\u53D1 | event.detail.value: \u5F53\u524D\u8FDB\u5EA6 |
bind:change | \u8FDB\u5EA6\u503C\u6539\u53D8\u540E\u89E6\u53D1 | event.detail: \u5F53\u524D\u8FDB\u5EA6 |
bind:drag-start | \u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1 | - |
bind:drag-end | \u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u540D\u79F0 | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
button | \u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE | { value: number } |
left-button v1.8.4 | \u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | { value: number } |
right-button v1.8.4 | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE \uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | { value: number } |
\u6B65\u8FDB\u5668\u7531\u589E\u52A0\u6309\u94AE\u3001\u51CF\u5C11\u6309\u94AE\u548C\u8F93\u5165\u6846\u7EC4\u6210\uFF0C\u7528\u4E8E\u5728\u4E00\u5B9A\u8303\u56F4\u5185\u8F93\u5165\u3001\u8C03\u6574\u6570\u5B57\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-stepper": "@vant/weapp/stepper/index"
+}
+
\u901A\u8FC7value
\u8BBE\u7F6E\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7change
\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002
<van-stepper value="{{ 1 }}" bind:change="onChange" />
+
Page({
+ onChange(event) {
+ console.log(event.detail);
+ },
+});
+
\u901A\u8FC7step
\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A1
\u3002
<van-stepper value="{{ 1 }}" step="2" />
+
\u901A\u8FC7min
\u548Cmax
\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\u3002
<van-stepper value="{{ 5 }}" min="5" max="8" />
+
\u8BBE\u7F6Einteger
\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002
<van-stepper value="{{ 1 }}" integer />
+
\u901A\u8FC7\u8BBE\u7F6Edisabled
\u5C5E\u6027\u6765\u7981\u7528\u6B65\u8FDB\u5668\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002
<van-stepper value="{{ 1 }}" disabled />
+
\u901A\u8FC7\u8BBE\u7F6Elong-press
\u5C5E\u6027\u51B3\u5B9A\u6B65\u8FDB\u5668\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\u3002
<van-stepper value="{{ 1 }}" long-press="{{ false }}" />
+
\u901A\u8FC7\u8BBE\u7F6Edecimal-length
\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002
<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
+
\u5982\u679C\u9700\u8981\u5F02\u6B65\u5730\u4FEE\u6539\u8F93\u5165\u6846\u7684\u503C\uFF0C\u53EF\u4EE5\u8BBE\u7F6Easync-change
\u5C5E\u6027\uFF0C\u5E76\u5728change
\u4E8B\u4EF6\u4E2D\u624B\u52A8\u4FEE\u6539value
\u3002
<van-stepper value="{{ value }}" async-change bind:change="onChange" />
+
Page({
+ data: {
+ value: 1,
+ },
+
+ onChange(value) {
+ Toast.loading({ forbidClick: true });
+
+ setTimeout(() => {
+ Toast.clear();
+ this.setData({ value });
+ }, 500);
+ },
+});
+
\u901A\u8FC7input-width
\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7button-size
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002
<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
value | \u8F93\u5165\u503C | string | number | \u6700\u5C0F\u503C |
min | \u6700\u5C0F\u503C | string | number | 1 |
max | \u6700\u5927\u503C | string | number | - |
step | \u6B65\u957F | string | number | 1 |
integer | \u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570 | boolean | false |
disabled | \u662F\u5426\u7981\u7528 | boolean | false |
disable-input | \u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | boolean | false |
async-change | \u662F\u5426\u5F00\u542F\u5F02\u6B65\u53D8\u66F4\uFF0C\u5F00\u542F\u540E\u9700\u8981\u624B\u52A8\u63A7\u5236\u8F93\u5165\u503C | boolean | false |
input-width | \u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | string | number | 32px |
button-size | \u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px \uFF0C\u8F93\u5165\u6846\u9AD8\u5EA6\u4F1A\u548C\u6309\u94AE\u5927\u5C0F\u4FDD\u6301\u4E00\u81F4 | string | number | 28px |
show-plus | \u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AE | boolean | true |
show-minus | \u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AE | boolean | true |
decimal-length | \u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570 | number | - |
theme | \u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round | string | - |
disable-plus | \u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AE | boolean | - |
disable-minus | \u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AE | boolean | - |
long-press | \u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF | boolean | true |
always-embed v1.9.3 | \u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548) | boolean | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:change | \u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | event.detail: \u5F53\u524D\u8F93\u5165\u7684\u503C |
bind:overlimit | \u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:plus | \u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:minus | \u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1 | - |
bind:focus | \u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | - |
bind:blur | \u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
plus | \u52A0\u53F7\u6309\u94AE |
minus | \u51CF\u53F7\u6309\u94AE |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
input-class | \u8F93\u5165\u6846\u6837\u5F0F\u7C7B |
plus-class | \u52A0\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B |
minus-class | \u51CF\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u6D41\u7A0B\u7684\u5404\u4E2A\u73AF\u8282\uFF0C\u8BA9\u7528\u6237\u4E86\u89E3\u5F53\u524D\u7684\u64CD\u4F5C\u5728\u6574\u4F53\u6D41\u7A0B\u4E2D\u7684\u4F4D\u7F6E\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-steps": "@vant/weapp/steps/index"
+}
+
<van-steps steps="{{ steps }}" active="{{ active }}" />
+
Page({
+ data: {
+ steps: [
+ {
+ text: '\u6B65\u9AA4\u4E00',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ },
+ {
+ text: '\u6B65\u9AA4\u4E8C',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ },
+ {
+ text: '\u6B65\u9AA4\u4E09',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ },
+ {
+ text: '\u6B65\u9AA4\u56DB',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ },
+ ],
+ },
+});
+
\u53EF\u4EE5\u901A\u8FC7 active-icon
\u548C active-color
\u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002
<van-steps
+ steps="{{ steps }}"
+ active="{{ active }}"
+ active-icon="success"
+ active-color="#38f"
+/>
+
\u53EF\u4EE5\u901A\u8FC7 inactiveIcon
\u548C activeIcon
\u5C5E\u6027\u5206\u522B\u8BBE\u7F6E\u6BCF\u4E00\u9879\u7684\u56FE\u6807\u3002
<van-steps steps="{{ steps }}" active="{{ active }}" />
+
Page({
+ data: {
+ steps: [
+ {
+ text: '\u6B65\u9AA4\u4E00',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ inactiveIcon: 'location-o',
+ activeIcon: 'success',
+ },
+ {
+ text: '\u6B65\u9AA4\u4E8C',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ inactiveIcon: 'like-o',
+ activeIcon: 'plus',
+ },
+ {
+ text: '\u6B65\u9AA4\u4E09',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ inactiveIcon: 'star-o',
+ activeIcon: 'cross',
+ },
+ {
+ text: '\u6B65\u9AA4\u56DB',
+ desc: '\u63CF\u8FF0\u4FE1\u606F',
+ inactiveIcon: 'phone-o',
+ activeIcon: 'fail',
+ },
+ ],
+ },
+});
+
\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6Edirection
\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5F0F\u3002
<van-steps
+ steps="{{ steps }}"
+ active="{{ active }}"
+ direction="vertical"
+ active-color="#ee0a24"
+/>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
active | \u5F53\u524D\u6B65\u9AA4 | number | 0 |
direction | \u663E\u793A\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal vertical | string | horizontal |
active-color | \u6FC0\u6D3B\u72B6\u6001\u989C\u8272 | string | #07c160 |
inactive-color | \u672A\u6FC0\u6D3B\u72B6\u6001\u989C\u8272 | string | #969799 |
active-icon | \u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | checked |
inactive-icon | \u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
\u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:click-step | \u70B9\u51FB\u6B65\u9AA4\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | event.detail:\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
desc-class | \u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B |
Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2Dposition: sticky
\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-sticky": "@vant/weapp/sticky/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u5C06\u5185\u5BB9\u5305\u88F9\u5728Sticky
\u7EC4\u4EF6\u5185\u5373\u53EF\u3002
<van-sticky>
+ <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>
+</van-sticky>
+
\u901A\u8FC7offset-top
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002
<van-sticky offset-top="{{ 50 }}">
+ <van-button type="info">\u5438\u9876\u8DDD\u79BB</van-button>
+</van-sticky>
+
\u901A\u8FC7container
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u539F\u4F4D\u7F6E\u3002
<view id="container" style="height: 150px;">
+ <van-sticky container="{{ container }}">
+ <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>
+ </van-sticky>
+</view>
+
Page({
+ data: {
+ container: null,
+ },
+
+ onReady() {
+ this.setData({
+ container: () => wx.createSelectorQuery().select('#container'),
+ });
+ },
+});
+
\u901A\u8FC7 scroll-top
\u4E0E offset-top
\u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u5728 scroll-view \u5185\u5D4C\u5957\u4F7F\u7528\u3002
<scroll-view
+ bind:scroll="onScroll"
+ scroll-y
+ id="scroller"
+ style="height: 200px;"
+>
+ <view style="height: 400px; padding-top: 50px;">
+ <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
+ <van-button type="warning">\u5D4C\u5957\u5728 scroll-view \u5185</van-button>
+ </van-sticky>
+ </view>
+</scroll-view>
+
Page({
+ data: {
+ scrollTop: 0,
+ offsetTop: 0,
+ },
+
+ onScroll(event) {
+ wx.createSelectorQuery()
+ .select('#scroller')
+ .boundingClientRect((res) => {
+ this.setData({
+ scrollTop: event.detail.scrollTop,
+ offsetTop: res.top,
+ });
+ })
+ .exec();
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
offset-top | \u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u5355\u4F4Dpx | number | 0 |
z-index | \u5438\u9876\u65F6\u7684 z-index | number | 99 |
container | \u4E00\u4E2A\u51FD\u6570\uFF0C\u8FD4\u56DE\u5BB9\u5668\u5BF9\u5E94\u7684 NodesRef \u8282\u70B9 | function | - |
scroll-top | \u5F53\u524D\u6EDA\u52A8\u533A\u57DF\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u975E null \u65F6\u4F1A\u7981\u7528\u9875\u9762\u6EDA\u52A8\u4E8B\u4EF6\u7684\u76D1\u542C | number | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:scroll | \u6EDA\u52A8\u65F6\u89E6\u53D1 | { scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 } |
\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-submit-bar": "@vant/weapp/submit-bar/index"
+}
+
<van-submit-bar
+ price="{{ 3050 }}"
+ button-text="\u63D0\u4EA4\u8BA2\u5355"
+ bind:submit="onSubmit"
+/>
+
\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit
\u4E8B\u4EF6\u3002
<van-submit-bar
+ disabled
+ price="{{ 3050 }}"
+ button-text="\u63D0\u4EA4\u8BA2\u5355"
+ tip="\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012"
+ tip-icon="info-o"
+ bind:submit="onSubmit"
+/>
+
\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit
\u4E8B\u4EF6\u3002
<van-submit-bar
+ loading
+ price="{{ 3050 }}"
+ button-text="\u63D0\u4EA4\u8BA2\u5355"
+ bind:submit="onSubmit"
+/>
+
\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-submit-bar
+ price="{{ 3050 }}"
+ button-text="\u63D0\u4EA4\u8BA2\u5355"
+ bind:submit="onClickButton"
+ tip="{{ true }}"
+>
+ <van-tag type="primary">\u6807\u7B7E</van-tag>
+ <view slot="tip">\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <text>\u4FEE\u6539\u5730\u5740</text></view>
+</van-submit-bar>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
price | \u4EF7\u683C\uFF08\u5355\u4F4D\u5206\uFF09 | number | - |
label | \u4EF7\u683C\u6587\u6848 | string | \u5408\u8BA1\uFF1A |
suffix-label | \u4EF7\u683C\u53F3\u4FA7\u6587\u6848 | string | - |
button-text | \u6309\u94AE\u6587\u5B57 | string | - |
button-type | \u6309\u94AE\u7C7B\u578B | string | danger |
tip | \u63D0\u793A\u6587\u6848 | string | boolean | - |
tip-icon | \u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
disabled | \u662F\u5426\u7981\u7528\u6309\u94AE | boolean | false |
loading | \u662F\u5426\u663E\u793A\u52A0\u8F7D\u4E2D\u7684\u6309\u94AE | boolean | false |
currency | \u8D27\u5E01\u7B26\u53F7 | string | \xA5 |
safe-area-inset-bottom | \u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB | boolean | true |
decimal-length | \u4EF7\u683C\u5C0F\u6570\u70B9\u540E\u4F4D\u6570 | number | 2 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:submit | \u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03 | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9 |
top | \u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9 |
tip | \u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u64CD\u4F5C\u548C\u8BF4\u660E |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
price-class | \u4EF7\u683C\u6837\u5F0F\u7C7B |
button-class | \u6309\u94AE\u6837\u5F0F\u7C7B |
bar-class | \u8BA2\u5355\u680F\u6837\u5F0F\u7C7B |
\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-swipe-cell": "@vant/weapp/swipe-cell/index"
+}
+
<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
+ <view slot="left">\u9009\u62E9</view>
+ <van-cell-group>
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+ </van-cell-group>
+ <view slot="right">\u5220\u9664</view>
+</van-swipe-cell>
+
\u5F53\u5F00\u542Fasync-close
\u65F6\uFF0C \u901A\u8FC7\u7ED1\u5B9Aclose
\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u70B9\u51FB\u65F6\u7684\u5173\u95ED\u884C\u4E3A\u3002
<van-swipe-cell
+ id="swipe-cell"
+ right-width="{{ 65 }}"
+ left-width="{{ 65 }}"
+ async-close
+ bind:close="onClose"
+>
+ <view slot="left">\u9009\u62E9</view>
+ <van-cell-group>
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+ </van-cell-group>
+ <view slot="right">\u5220\u9664</view>
+</van-swipe-cell>
+
Page({
+ onClose(event) {
+ const { position, instance } = event.detail;
+ switch (position) {
+ case 'left':
+ case 'cell':
+ instance.close();
+ break;
+ case 'right':
+ Dialog.confirm({
+ message: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',
+ }).then(() => {
+ instance.close();
+ });
+ break;
+ }
+ },
+});
+
<van-swipe-cell
+ id="swipe-cell2"
+ right-width="{{ 65 }}"
+ left-width="{{ 65 }}"
+ name="\u793A\u4F8B"
+ bind:open="onOpen"
+>
+ <view slot="left" class="van-swipe-cell__left">\u9009\u62E9</view>
+ <van-cell-group>
+ <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
+ </van-cell-group>
+ <view slot="right" class="van-swipe-cell__right">\u5220\u9664</view>
+</van-swipe-cell>
+
Page({
+ onOpen(event) {
+ const { position, name } = event.detail;
+ switch (position) {
+ case 'left':
+ Notify({
+ type: 'primary',
+ message: \`\${name}\${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`,
+ });
+ break;
+ case 'right':
+ Notify({
+ type: 'primary',
+ message: \`\${name}\${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`,
+ });
+ break;
+ }
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728 close \u4E8B\u4EF6\u7684\u53C2\u6570\u4E2D\u83B7\u53D6\u5230 | string | number | - |
left-width | \u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6 | number | 0 |
right-width | \u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6 | number | 0 |
async-close | \u662F\u5426\u5F02\u6B65\u5173\u95ED | boolean | false |
disabled v1.3.4 | \u662F\u5426\u7981\u7528\u6ED1\u52A8 | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9 |
left | \u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9 |
right | \u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u65F6\u89E6\u53D1 | \u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (left right cell outside ) |
bind:close | \u5173\u95ED\u65F6\u89E6\u53D1 | { position: 'left' | 'right' , instance , name: string } |
bind:open | \u6253\u5F00\u65F6\u89E6\u53D1 | { position: 'left' | 'right' , name: string } |
\u53C2\u6570 | \u7C7B\u578B | \u8BF4\u660E |
---|---|---|
position | string | \u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (left right cell outside ) |
instance | object | SwipeCell \u5B9E\u4F8B |
name | \u6807\u8BC6\u7B26 | string |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
open | position: left | right | - | \u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F |
close | - | - | \u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F |
\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-switch": "@vant/weapp/switch/index"
+}
+
<van-switch checked="{{ checked }}" bind:change="onChange" />
+
Page({
+ data: {
+ checked: true,
+ },
+
+ onChange({ detail }) {
+ // \u9700\u8981\u624B\u52A8\u5BF9 checked \u72B6\u6001\u8FDB\u884C\u66F4\u65B0
+ this.setData({ checked: detail });
+ },
+});
+
<van-switch checked="{{ checked }}" disabled />
+
<van-switch checked="{{ checked }}" loading />
+
<van-switch checked="{{ checked }}" size="24px" />
+
<van-switch
+ checked="{{ checked }}"
+ active-color="#07c160"
+ inactive-color="#ee0a24"
+/>
+
<van-switch checked="{{ checked }}" bind:change="onChange" />
+
Page({
+ data: {
+ checked: true,
+ },
+
+ onChange({ detail }) {
+ wx.showModal({
+ title: '\u63D0\u793A',
+ content: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',
+ success: (res) => {
+ if (res.confirm) {
+ this.setData({ checked2: detail });
+ }
+ },
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26 | string | - |
checked | \u5F00\u5173\u9009\u4E2D\u72B6\u6001 | any | false |
loading | \u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | boolean | false |
disabled | \u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | boolean | false |
size | \u5F00\u5173\u5C3A\u5BF8 | string | 30px |
active-color | \u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272 | string | #1989fa |
inactive-color | \u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272 | string | #fff |
active-value | \u6253\u5F00\u65F6\u7684\u503C | any | true |
inactive-value | \u5173\u95ED\u65F6\u7684\u503C | any | false |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:change | \u5F00\u5173\u72B6\u6001\u5207\u6362\u56DE\u8C03 | event.detail: \u662F\u5426\u9009\u4E2D\u5F00\u5173 |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
node-class | \u5706\u70B9\u6837\u5F0F\u7C7B |
\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-tab": "@vant/weapp/tab/index",
+ "van-tabs": "@vant/weapp/tabs/index"
+}
+
\u901A\u8FC7active
\u8BBE\u5B9A\u5F53\u524D\u6FC0\u6D3B\u6807\u7B7E\u5BF9\u5E94\u7684\u7D22\u5F15\u503C\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u542F\u7528\u7B2C\u4E00\u4E2A\u6807\u7B7E\u3002
<van-tabs active="{{ active }}" bind:change="onChange">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+</van-tabs>
+
Page({
+ data: {
+ active: 1,
+ },
+
+ onChange(event) {
+ wx.showToast({
+ title: \`\u5207\u6362\u5230\u6807\u7B7E \${event.detail.name}\`,
+ icon: 'none',
+ });
+ },
+});
+
\u5728\u6807\u7B7E\u6307\u5B9Aname
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cactive
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684name
\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002
<van-tabs active="a">
+ <van-tab title="\u6807\u7B7E 1" name="a">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2" name="b">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3" name="c">\u5185\u5BB9 3</van-tab>
+</van-tabs>
+
\u591A\u4E8E 5 \u4E2A\u6807\u7B7E\u65F6\uFF0CTab \u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8\u3002
<van-tabs active="{{ active }}">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+ <van-tab title="\u6807\u7B7E 5">\u5185\u5BB9 5</van-tab>
+ <van-tab title="\u6807\u7B7E 6">\u5185\u5BB9 6</van-tab>
+</van-tabs>
+
\u8BBE\u7F6Edisabled
\u5C5E\u6027\u5373\u53EF\u7981\u7528\u6807\u7B7E\u3002\u5982\u679C\u9700\u8981\u76D1\u542C\u7981\u7528\u6807\u7B7E\u7684\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u5728van-tabs
\u4E0A\u76D1\u542Cdisabled
\u4E8B\u4EF6\u3002
<van-tabs bind:disabled="onClickDisabled">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2" disabled>\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+</van-tabs>
+
Page({
+ onClickDisabled(event) {
+ wx.showToast({
+ title: \`\u6807\u7B7E \${event.detail.name} \u5DF2\u88AB\u7981\u7528\`,
+ icon: 'none',
+ });
+ },
+});
+
Tab
\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1Aline
\u548Ccard
\uFF0C\u9ED8\u8BA4\u4E3Aline
\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7type
\u5C5E\u6027\u4FEE\u6539\u6837\u5F0F\u98CE\u683C\u3002
<van-tabs type="card">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+</van-tabs>
+
\u53EF\u4EE5\u5728van-tabs
\u4E0A\u7ED1\u5B9Aclick
\u4E8B\u4EF6\uFF0C\u5728\u56DE\u8C03\u53C2\u6570\u7684event.detail
\u4E2D\u53EF\u4EE5\u53D6\u5F97\u88AB\u70B9\u51FB\u6807\u7B7E\u7684\u6807\u9898\u548C\u6807\u8BC6\u7B26\u3002
<van-tabs bind:click="onClick">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+</van-tabs>
+
Page({
+ onClick(event) {
+ wx.showToast({
+ title: \`\u70B9\u51FB\u6807\u7B7E \${event.detail.name}\`,
+ icon: 'none',
+ });
+ },
+});
+
\u901A\u8FC7sticky
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u7C98\u6027\u5E03\u5C40\uFF0C\u7C98\u6027\u5E03\u5C40\u4E0B\uFF0C\u5F53 Tab \u6EDA\u52A8\u5230\u9876\u90E8\u65F6\u4F1A\u81EA\u52A8\u5438\u9876\u3002
<van-tabs sticky>
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+</van-tabs>
+
\u53EF\u4EE5\u901A\u8FC7animated
\u6765\u8BBE\u7F6E\u662F\u5426\u542F\u7528\u5207\u6362 tab \u65F6\u7684\u52A8\u753B\u3002
<van-tabs animated>
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+</van-tabs>
+
\u901A\u8FC7swipeable
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002
<van-tabs swipeable>
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+</van-tabs>
+
\u5982\u679C\u5C06 van-tabs \u5D4C\u5957\u5728 van-popup \u7B49\u4F1A\u9690\u85CF\u5185\u5BB9\u7684\u7EC4\u4EF6\u6216\u8282\u70B9\u5185\uFF0C\u5F53 van-tabs \u663E\u793A\u65F6\u4E0B\u5212\u7EBF\u5C06\u4E0D\u4F1A\u6B63\u5E38\u663E\u793A\u3002
\u6B64\u65F6\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 wx:if
\u624B\u52A8\u63A7\u5236 van-tabs \u7684\u6E32\u67D3\u6765\u89C4\u907F\u8FD9\u79CD\u573A\u666F\u3002
<van-popup show="{{ show }}">
+ <van-tabs wx:if="{{ show }}">
+ <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
+ <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
+ <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
+ <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
+ </van-tabs>
+</van-popup>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type | \u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Acard | string | line |
color | \u6807\u7B7E\u4E3B\u9898\u8272 | string | #ee0a24 |
active | \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26 | string | number | 0 |
duration | \u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2 | number | 0.3 |
line-width | \u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4Dpx | string | number | 40px |
line-height | \u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4Dpx | string | number | 3px |
animated | \u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B | boolean | false |
border | \u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 line \u98CE\u683C\u4E0B\u751F\u6548 | boolean | false |
ellipsis | \u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57 | boolean | true |
sticky | \u662F\u5426\u4F7F\u7528\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40 | boolean | false |
swipeable | \u662F\u5426\u5F00\u542F\u624B\u52BF\u6ED1\u52A8\u5207\u6362 | boolean | false |
lazy-render | \u662F\u5426\u5F00\u542F\u6807\u7B7E\u9875\u5185\u5BB9\u5EF6\u8FDF\u6E32\u67D3 | boolean | true |
offset-top | \u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40\u4E0B\u4E0E\u9876\u90E8\u7684\u6700\u5C0F\u8DDD\u79BB\uFF0C\u5355\u4F4Dpx | number | - |
swipe-threshold | \u6EDA\u52A8\u9608\u503C\uFF0C\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u6807\u7B7E\u680F\u5BBD\u5EA6\u65F6\u5F00\u59CB\u6A2A\u5411\u6EDA\u52A8 | number | 5 |
title-active-color | \u6807\u9898\u9009\u4E2D\u6001\u989C\u8272 | string | - |
title-inactive-color | \u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272 | string | - |
z-index | z-index \u5C42\u7EA7 | number | 1 |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | string | number | \u6807\u7B7E\u7684\u7D22\u5F15\u503C |
title | \u6807\u9898 | string | - |
disabled | \u662F\u5426\u7981\u7528\u6807\u7B7E | boolean | false |
dot | \u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9 | boolean | - |
info | \u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F | string | number | - |
title-style | \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F | string | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
nav-left | \u6807\u9898\u5DE6\u4FA7\u5185\u5BB9 |
nav-right | \u6807\u9898\u53F3\u4FA7\u5185\u5BB9 |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u6807\u7B7E\u9875\u5185\u5BB9 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:click | \u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1 | name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898 |
bind:change | \u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1 | name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898 |
bind:disabled | \u70B9\u51FB\u88AB\u7981\u7528\u7684\u6807\u7B7E\u65F6\u89E6\u53D1 | name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898 |
bind:scroll | \u6EDA\u52A8\u65F6\u89E6\u53D1 | { scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 } |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
nav-class | \u6807\u7B7E\u680F\u6837\u5F0F\u7C7B |
tab-class | \u6807\u7B7E\u6837\u5F0F\u7C7B |
tab-active-class | \u6807\u7B7E\u6FC0\u6D3B\u6001\u6837\u5F0F\u7C7B |
\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
resize | - | - | \u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 |
Tabs \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u5E95\u90E8\u6761\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u5C55\u793A\u5E95\u90E8\u6761\u4F4D\u7F6E\u3002
\u65B9\u6CD5\u4E00\uFF0C\u4F7F\u7528 wx:if
\u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\uFF0C\u4F7F\u7EC4\u4EF6\u91CD\u65B0\u521D\u59CB\u5316\u3002
<van-tabs wx:if="show" />
+
\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\u3002
<van-tabs id="tabs" />
+
this.selectComponent('#tabs').resize();
+
\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-tabbar": "@vant/weapp/tabbar/index",
+ "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+}
+
<van-tabbar active="{{ active }}" bind:change="onChange">
+ <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
+</van-tabbar>
+
Page({
+ data: {
+ active: 0,
+ },
+ onChange(event) {
+ // event.detail \u7684\u503C\u4E3A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15
+ this.setData({ active: event.detail });
+ },
+});
+
\u5728\u6807\u7B7E\u6307\u5B9Aname
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684name
\u3002
<van-tabbar active="{{ active }}" bind:change="onChange">
+ <van-tabbar-item name="home" icon="home-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item name="search" icon="search">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item name="friends" icon="friends-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item name="setting" icon="setting-o">\u6807\u7B7E</van-tabbar-item>
+</van-tabbar>
+
Page({
+ data: {
+ active: 'home',
+ },
+ onChange(event) {
+ this.setData({ active: event.detail });
+ },
+});
+
<van-tabbar active="{{ active }}" bind:change="onChange">
+ <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="search" dot>\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="friends-o" info="5">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="setting-o" info="20">\u6807\u7B7E</van-tabbar-item>
+</van-tabbar>
+
\u53EF\u4EE5\u901A\u8FC7 slot \u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5176\u4E2D icon slot \u4EE3\u8868\u672A\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\uFF0Cicon-active slot \u4EE3\u8868\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u3002
<van-tabbar active="{{ active }}" bind:change="onChange">
+ <van-tabbar-item info="3">
+ <image
+ slot="icon"
+ src="{{ icon.normal }}"
+ mode="aspectFit"
+ style="width: 30px; height: 18px;"
+ />
+ <image
+ slot="icon-active"
+ src="{{ icon.active }}"
+ mode="aspectFit"
+ style="width: 30px; height: 18px;"
+ />
+ \u81EA\u5B9A\u4E49
+ </van-tabbar-item>
+ <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
+</van-tabbar>
+
Page({
+ data: {
+ active: 0,
+ icon: {
+ normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+ active: 'https://img.yzcdn.cn/vant/user-active.png',
+ },
+ },
+ onChange(event) {
+ this.setData({ active: event.detail });
+ },
+});
+
<van-tabbar
+ active="{{ active }}"
+ active-color="#07c160"
+ inactive-color="#000"
+ bind:change="onChange"
+>
+ <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>
+ <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
+</van-tabbar>
+
Page({
+ data: {
+ active: 0,
+ },
+ onChange(event) {
+ this.setData({ active: event.detail });
+ },
+});
+
<van-tabbar active="{{ active }}" bind:change="onChange">
+ <van-tabbar-item icon="home-o">\u6807\u7B7E1</van-tabbar-item>
+ <van-tabbar-item icon="search">\u6807\u7B7E2</van-tabbar-item>
+ <van-tabbar-item icon="friends-o">\u6807\u7B7E3</van-tabbar-item>
+ <van-tabbar-item icon="setting-o">\u6807\u7B7E4</van-tabbar-item>
+</van-tabbar>
+
Page({
+ data: {
+ active: 0,
+ },
+ onClick(event) {
+ wx.showToast({
+ title: \`\u70B9\u51FB\u6807\u7B7E \${event.detail + 1}\`,
+ icon: 'none',
+ });
+ },
+});
+
\u8BF7\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 \u4E0E \u4EE3\u7801\u7247\u6BB5\u3002
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
active | \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15 | number | - |
fixed | \u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8 | boolean | true |
placeholder | \u56FA\u5B9A\u5728\u5E95\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | boolean | false |
border | \u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846 | boolean | true |
z-index | \u5143\u7D20 z-index | number | 1 |
active-color | \u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | string | #1989fa |
inactive-color | \u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | string | #7d7e80 |
safe-area-inset-bottom | \u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB | boolean | true |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:change | \u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1 | event.detail: \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | string | number | \u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C |
icon | \u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | - |
icon-prefix | \u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | string | van-icon |
dot | \u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9 | boolean | - |
info | \u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F | string | number | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
icon | \u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807 |
icon-active | \u9009\u4E2D\u65F6\u7684\u56FE\u6807 |
\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-tag": "@vant/weapp/tag/index"
+}
+
\u901A\u8FC7 type
\u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u7070\u8272\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>
+<van-tag type="success">\u6807\u7B7E</van-tag>
+<van-tag type="danger">\u6807\u7B7E</van-tag>
+<van-tag type="warning">\u6807\u7B7E</van-tag>
+
\u8BBE\u7F6E plain
\u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002
<van-tag plain type="primary">\u6807\u7B7E</van-tag>
+<van-tag plain type="success">\u6807\u7B7E</van-tag>
+<van-tag plain type="danger">\u6807\u7B7E</van-tag>
+<van-tag plain type="warning">\u6807\u7B7E</van-tag>
+
\u901A\u8FC7 round
\u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002
<van-tag round type="primary">\u6807\u7B7E</van-tag>
+<van-tag round type="success">\u6807\u7B7E</van-tag>
+<van-tag round type="danger">\u6807\u7B7E</van-tag>
+<van-tag round type="warning">\u6807\u7B7E</van-tag>
+
\u901A\u8FC7 mark
\u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002
<van-tag mark type="primary">\u6807\u7B7E</van-tag>
+<van-tag mark type="success">\u6807\u7B7E</van-tag>
+<van-tag mark type="danger">\u6807\u7B7E</van-tag>
+<van-tag mark type="warning">\u6807\u7B7E</van-tag>
+
<van-tag color="#f2826a">\u6807\u7B7E</van-tag>
+<van-tag color="#7232dd">\u6807\u7B7E</van-tag>
+<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>
+<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>
+
<van-tag type="danger">\u6807\u7B7E</van-tag>
+<van-tag type="danger" size="medium">\u6807\u7B7E</van-tag>
+<van-tag type="danger" size="large">\u6807\u7B7E</van-tag>
+
\u6DFB\u52A0 closeable
\u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 close
\u4E8B\u4EF6\uFF0C\u5728 close
\u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002
<van-tag
+ wx:if="{{ show.primary }}"
+ closeable
+ size="medium"
+ type="primary"
+ id="primary"
+ bind:close="onClose"
+>
+ \u6807\u7B7E
+</van-tag>
+<van-tag
+ wx:if="{{ show.success }}"
+ closeable
+ size="medium"
+ type="success"
+ id="success"
+ bind:close="onClose"
+>
+ \u6807\u7B7E
+</van-tag>
+
Page({
+ data: {
+ show: {
+ primary: true,
+ success: true,
+ },
+ },
+ onClose(event) {
+ this.setData({
+ [\`show.\${event.target.id}\`]: false,
+ });
+ },
+});
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type | \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success danger warning | string | - |
size | \u5927\u5C0F, \u53EF\u9009\u503C\u4E3A large medium | string | - |
color | \u6807\u7B7E\u989C\u8272 | string | - |
plain | \u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F | boolean | false |
round | \u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F | boolean | false |
mark | \u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F | boolean | false |
text-color | \u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E color \u5C5E\u6027 | string | white |
closeable | \u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49 Tag \u663E\u793A\u5185\u5BB9 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:close | \u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
\u5728\u9875\u9762\u4E2D\u95F4\u5F39\u51FA\u9ED1\u8272\u534A\u900F\u660E\u63D0\u793A\uFF0C\u7528\u4E8E\u6D88\u606F\u901A\u77E5\u3001\u52A0\u8F7D\u63D0\u793A\u3001\u64CD\u4F5C\u7ED3\u679C\u63D0\u793A\u7B49\u573A\u666F\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-toast": "@vant/weapp/toast/index"
+}
+
import Toast from 'path/to/@vant/weapp/dist/toast/toast';
+
+Toast('\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~');
+
<van-toast id="van-toast" />
+
\u4F7F\u7528 Toast.loading
\u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 forbidClick
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\uFF0C\u901A\u8FC7 loadingType
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002
Toast.loading({
+ message: '\u52A0\u8F7D\u4E2D...',
+ forbidClick: true,
+});
+
+// \u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807
+Toast.loading({
+ message: '\u52A0\u8F7D\u4E2D...',
+ forbidClick: true,
+ loadingType: 'spinner',
+});
+
Toast.success('\u6210\u529F\u6587\u6848');
+Toast.fail('\u5931\u8D25\u6587\u6848');
+
const toast = Toast.loading({
+ duration: 0, // \u6301\u7EED\u5C55\u793A toast
+ forbidClick: true,
+ message: '\u5012\u8BA1\u65F6 3 \u79D2',
+ selector: '#custom-selector',
+});
+
+let second = 3;
+const timer = setInterval(() => {
+ second--;
+ if (second) {
+ toast.setData({
+ message: \`\u5012\u8BA1\u65F6 \${second} \u79D2\`,
+ });
+ } else {
+ clearInterval(timer);
+ Toast.clear();
+ }
+}, 1000);
+
<van-toast id="custom-selector" />
+
Toast({
+ type: 'success',
+ message: '\u63D0\u4EA4\u6210\u529F',
+ onClose: () => {
+ console.log('\u6267\u884COnClose\u51FD\u6570');
+ },
+});
+
\u65B9\u6CD5\u540D | \u53C2\u6570 | \u8FD4\u56DE\u503C | \u4ECB\u7ECD |
---|---|---|---|
Toast | options | message | toast \u5B9E\u4F8B | \u5C55\u793A\u63D0\u793A |
Toast.loading | options | message | toast \u5B9E\u4F8B | \u5C55\u793A\u52A0\u8F7D\u63D0\u793A |
Toast.success | options | message | toast \u5B9E\u4F8B | \u5C55\u793A\u6210\u529F\u63D0\u793A |
Toast.fail | options | message | toast \u5B9E\u4F8B | \u5C55\u793A\u5931\u8D25\u63D0\u793A |
Toast.clear | clearAll | void | \u5173\u95ED\u63D0\u793A |
Toast.setDefaultOptions | options | void | \u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548 |
Toast.resetDefaultOptions | - | void | \u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548 |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type | \u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A loading success fail html | string | text |
position | \u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top middle bottom | string | middle |
message | \u5185\u5BB9 | string | '' |
mask | \u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | boolean | false |
forbidClick | \u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FB | boolean | false |
loadingType | \u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A spinner | string | circular |
zIndex | z-index \u5C42\u7EA7 | number | 1000 |
duration | \u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931 | number | 2000 |
selector | \u81EA\u5B9A\u4E49\u9009\u62E9\u5668 | string | van-toast |
context | \u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587 | object | \u5F53\u524D\u9875\u9762 |
onClose | \u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u5185\u5BB9 |
\u4F7F\u5143\u7D20\u4ECE\u4E00\u79CD\u6837\u5F0F\u9010\u6E10\u53D8\u5316\u4E3A\u53E6\u4E00\u79CD\u6837\u5F0F\u7684\u6548\u679C\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-transition": "@vant/weapp/transition/index"
+}
+
\u5C06\u5143\u7D20\u5305\u88F9\u5728 transition \u7EC4\u4EF6\u5185\uFF0C\u5728\u5143\u7D20\u5C55\u793A/\u9690\u85CF\u65F6\uFF0C\u4F1A\u6709\u76F8\u5E94\u7684\u8FC7\u6E21\u52A8\u753B\u3002
<van-transition show="{{ show }}" custom-class="block">\u5185\u5BB9</van-transition>
+
transition \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u52A8\u753B\uFF0C\u53EF\u4EE5\u901A\u8FC7name
\u5B57\u6BB5\u6307\u5B9A\u52A8\u753B\u7C7B\u578B\u3002
<van-transition name="fade-up" />
+
\u53EF\u4EE5\u901A\u8FC7\u5916\u90E8\u6837\u5F0F\u7C7B\u81EA\u5B9A\u4E49\u8FC7\u6E21\u6548\u679C\uFF0C\u8FD8\u53EF\u4EE5\u5B9A\u5236\u8FDB\u5165\u548C\u79FB\u51FA\u7684\u6301\u7EED\u65F6\u95F4\u3002
<van-transition
+ show="{{ show }}"
+ name=""
+ duration="{{ { enter: 300, leave: 1000 } }}"
+ enter-class="van-enter-class"
+ enter-active-class="van-enter-active-class"
+ leave-active-class="van-leave-active-class"
+ leave-to-class="van-leave-to-class"
+/>
+
.van-enter-active-class,
+.van-leave-active-class {
+ transition-property: background-color, transform;
+}
+
+.van-enter-class,
+.van-leave-to-class {
+ background-color: red;
+ transform: rotate(-360deg) translate3d(-100%, -100%, 0);
+}
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u52A8\u753B\u7C7B\u578B | string | fade |
show | \u662F\u5426\u5C55\u793A\u7EC4\u4EF6 | boolean | true |
duration | \u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2 | number | object | 300 |
custom-style | \u81EA\u5B9A\u4E49\u6837\u5F0F | string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u53C2\u6570 |
---|---|---|
bind:before-enter | \u8FDB\u5165\u524D\u89E6\u53D1 | - |
bind:enter | \u8FDB\u5165\u4E2D\u89E6\u53D1 | - |
bind:after-enter | \u8FDB\u5165\u540E\u89E6\u53D1 | - |
bind:before-leave | \u79BB\u5F00\u524D\u89E6\u53D1 | - |
bind:leave | \u79BB\u5F00\u4E2D\u89E6\u53D1 | - |
bind:after-leave | \u79BB\u5F00\u540E\u89E6\u53D1 | - |
\u7C7B\u540D | \u8BF4\u660E |
---|---|
custom-class | \u6839\u8282\u70B9\u6837\u5F0F\u7C7B |
enter-class | \u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u7684\u4E0B\u4E00\u5E27\u79FB\u9664\u3002 |
enter-active-class | \u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u8FDB\u5165\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002 |
enter-to-class | \u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 enter-class \u88AB\u79FB\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002 |
leave-class | \u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u4E0B\u4E00\u5E27\u88AB\u79FB\u9664\u3002 |
leave-active-class | \u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u79BB\u5F00\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002 |
leave-to-class | \u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 leave-class \u88AB\u5220\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002 |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
fade | \u6DE1\u5165 |
fade-up | \u4E0A\u6ED1\u6DE1\u5165 |
fade-down | \u4E0B\u6ED1\u6DE1\u5165 |
fade-left | \u5DE6\u6ED1\u6DE1\u5165 |
fade-right | \u53F3\u6ED1\u6DE1\u5165 |
slide-up | \u4E0A\u6ED1\u8FDB\u5165 |
slide-down | \u4E0B\u6ED1\u8FDB\u5165 |
slide-left | \u5DE6\u6ED1\u8FDB\u5165 |
slide-right | \u53F3\u6ED1\u8FDB\u5165 |
\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-tree-select": "@vant/weapp/tree-select/index"
+}
+
\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u4E0A\u4F7F\u7528 van-tree-select \u6807\u7B7E\u3002\u4F20\u5165\u5BF9\u5E94\u7684\u6570\u636E\u5373\u53EF\u3002\u6B64\u7EC4\u4EF6\u652F\u6301\u5355\u9009\u6216\u591A\u9009\uFF0C\u5177\u4F53\u884C\u4E3A\u5B8C\u5168\u57FA\u4E8E\u4E8B\u4EF6 click-item \u7684\u5B9E\u73B0\u903B\u8F91\u5982\u4F55\u4E3A\u5C5E\u6027 active-id \u8D4B\u503C\uFF0C\u5F53 active-id \u4E3A\u6570\u7EC4\u65F6\u5373\u4E3A\u591A\u9009\u72B6\u6001\u3002
<van-tree-select
+ items="{{ items }}"
+ main-active-index="{{ mainActiveIndex }}"
+ active-id="{{ activeId }}"
+ bind:click-nav="onClickNav"
+ bind:click-item="onClickItem"
+/>
+
Page({
+ data: {
+ mainActiveIndex: 0,
+ activeId: null,
+ },
+
+ onClickNav({ detail = {} }) {
+ this.setData({
+ mainActiveIndex: detail.index || 0,
+ });
+ },
+
+ onClickItem({ detail = {} }) {
+ const activeId = this.data.activeId === detail.id ? null : detail.id;
+
+ this.setData({ activeId });
+ },
+});
+
<van-tree-select
+ items="{{ items }}"
+ main-active-index="{{ mainActiveIndex }}"
+ active-id="{{ activeId }}"
+ max="{{ max }}"
+ bind:click-nav="onClickNav"
+ bind:click-item="onClickItem"
+/>
+
Page({
+ data: {
+ mainActiveIndex: 0,
+ activeId: [],
+ max: 2,
+ },
+
+ onClickNav({ detail = {} }) {
+ this.setData({
+ mainActiveIndex: detail.index || 0,
+ });
+ },
+
+ onClickItem({ detail = {} }) {
+ const { activeId } = this.data;
+
+ const index = activeId.indexOf(detail.id);
+ if (index > -1) {
+ activeId.splice(index, 1);
+ } else {
+ activeId.push(detail.id);
+ }
+
+ this.setData({ activeId });
+ },
+});
+
<van-tree-select
+ items="{{ items }}"
+ height="55vw"
+ main-active-index="{{ mainActiveIndex }}"
+ active-id="{{ activeId }}"
+ bind:click-nav="onClickNav"
+ bind:click-item="onClickItem"
+>
+ <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
+</van-tree-select>
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
items | \u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E | Array | [] |
height | \u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | number | string | 300 |
main-active-index | \u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15 | number | 0 |
active-id | \u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4 | string | number | Array | 0 |
max | \u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570 | number | Infinity |
selected-icon v1.5.0 | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807 | string | success |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:click-nav | \u5DE6\u4FA7\u5BFC\u822A\u70B9\u51FB\u65F6\uFF0C\u89E6\u53D1\u7684\u4E8B\u4EF6 | event.detail.index\uFF1A\u88AB\u70B9\u51FB\u7684\u5BFC\u822A\u7684\u7D22\u5F15 |
bind:click-item | \u53F3\u4FA7\u9009\u62E9\u9879\u88AB\u70B9\u51FB\u65F6\uFF0C\u4F1A\u89E6\u53D1\u7684\u4E8B\u4EF6 | event.detail: \u8BE5\u70B9\u51FB\u9879\u7684\u6570\u636E |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
content | \u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9\uFF0C\u5982\u679C\u5B58\u5728 items\uFF0C\u5219\u63D2\u5165\u5728\u9876\u90E8 |
items
\u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B\u4E00\u7CFB\u5217\u63CF\u8FF0\u5206\u7C7B\u7684\u5BF9\u8C61\u3002\u6BCF\u4E2A\u5206\u7C7B\u91CC\uFF0Ctext \u8868\u793A\u5F53\u524D\u5206\u7C7B\u7684\u540D\u79F0\u3002children \u8868\u793A\u5206\u7C7B\u91CC\u7684\u53EF\u9009\u9879\uFF0C\u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0Cid \u88AB\u7528\u6765\u552F\u4E00\u6807\u8BC6\u6BCF\u4E2A\u9009\u9879\u3002
[
+ {
+ // \u5BFC\u822A\u540D\u79F0
+ text: '\u6240\u6709\u57CE\u5E02',
+ // \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301
+ badge: 3,
+ // \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301
+ dot: true,
+ // \u7981\u7528\u9009\u9879
+ disabled: false,
+ // \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879
+ children: [
+ {
+ // \u540D\u79F0
+ text: '\u6E29\u5DDE',
+ // id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6
+ id: 1,
+ // \u7981\u7528\u9009\u9879
+ disabled: true,
+ },
+ {
+ text: '\u676D\u5DDE',
+ id: 2,
+ },
+ ],
+ },
+];
+
\u7C7B\u540D | \u8BF4\u660E |
---|---|
main-item-class | \u5DE6\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B |
content-item-class | \u53F3\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B |
main-active-class | \u5DE6\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B |
content-active-class | \u53F3\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B |
main-disabled-class | \u5DE6\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B |
content-disabled-class | \u53F3\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B |
\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002
\u5728app.json
\u6216index.json
\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6
\u7248\u672C\uFF0CES5
\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002
"usingComponents": {
+ "van-uploader": "@vant/weapp/uploader/index"
+}
+
Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B
\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1after-read
\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684\u6587\u4EF6\u7684\u4E34\u65F6\u5730\u5740\uFF0C\u7136\u540E\u518D\u4F7F\u7528wx.uploadFile
\u5C06\u56FE\u7247\u4E0A\u4F20\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u3002
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
+
Page({
+ data: {
+ fileList: [],
+ },
+
+ afterRead(event) {
+ const { file } = event.detail;
+ // \u5F53\u8BBE\u7F6E mutiple \u4E3A true \u65F6, file \u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u5426\u5219\u4E3A\u5BF9\u8C61\u683C\u5F0F
+ wx.uploadFile({
+ url: 'https://example.weixin.qq.com/upload', // \u4EC5\u4E3A\u793A\u4F8B\uFF0C\u975E\u771F\u5B9E\u7684\u63A5\u53E3\u5730\u5740
+ filePath: file.url,
+ name: 'file',
+ formData: { user: 'test' },
+ success(res) {
+ // \u4E0A\u4F20\u5B8C\u6210\u9700\u8981\u66F4\u65B0 fileList
+ const { fileList = [] } = this.data;
+ fileList.push({ ...file, url: res.data });
+ this.setData({ fileList });
+ },
+ });
+ },
+});
+
\u901A\u8FC7\u5411\u7EC4\u4EF6\u4F20\u5165file-list
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u56FE\u7247\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u56FE\u7247\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002file-list \u7684\u8BE6\u7EC6\u7ED3\u6784\u53EF\u89C1\u4E0B\u65B9\u3002
<van-uploader file-list="{{ fileList }}" />
+
Page({
+ data: {
+ fileList: [
+ {
+ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+ name: '\u56FE\u72471',
+ },
+ // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6
+ // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E
+ {
+ url: 'http://iph.href.lu/60x60?text=default',
+ name: '\u56FE\u72472',
+ isImage: true,
+ deletable: true,
+ },
+ ],
+ },
+});
+
\u901A\u8FC7deletable
\u5C5E\u6027\u53EF\u63A7\u5236\u662F\u5426\u5F00\u542F\u6240\u6709\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0Cdeletable
\u9ED8\u8BA4\u4E3Atrue
\uFF0C\u5373\u6240\u6709\u56FE\u7247\u90FD\u53EF\u5220\u9664\u3002
\u82E5\u5E0C\u671B\u63A7\u5236\u5355\u5F20\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C\u53EF\u5C06deletable
\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrue
\uFF0C\u5E76\u5728fileList
\u4E2D\u4E3A\u6BCF\u4E00\u9879\u8BBE\u7F6Edeletable
\u5C5E\u6027\u3002
<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />
+
Page({
+ data: {
+ fileList: [
+ {
+ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ deletable: false,
+ },
+ ],
+ },
+});
+
\u901A\u8FC7status
\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0Cuploading
\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0Cfailed
\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0Cdone
\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002
<van-uploader file-list="{{ fileList }}" />
+
Page({
+ data: {
+ fileList: [
+ {
+ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+ status: 'uploading',
+ message: '\u4E0A\u4F20\u4E2D',
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ status: 'failed',
+ message: '\u4E0A\u4F20\u5931\u8D25',
+ },
+ ],
+ },
+});
+
\u901A\u8FC7max-count
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002
<van-uploader
+ file-list="{{ fileList }}"
+ max-count="2"
+ bind:after-read="afterRead"
+/>
+
\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002
<van-uploader>
+ <van-button icon="photo" type="primary">\u4E0A\u4F20\u56FE\u7247</van-button>
+</van-uploader>
+
\u5C06use-before-read
\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrue
\uFF0C\u7136\u540E\u7ED1\u5B9A before-read
\u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\uFF0C\u8C03\u7528 callback
\u65B9\u6CD5\u4F20\u5165 true
\u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u4F20\u5165 false
\u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002
<van-uploader
+ file-list="{{ fileList }}"
+ accept="media"
+ use-before-read
+ bind:before-read="beforeRead"
+ bind:after-read="afterRead"
+/>
+
Page({
+ data: {
+ fileList: [],
+ },
+
+ beforeRead(event) {
+ const { file, callback } = event.detail;
+ callback(file.type === 'image');
+ },
+});
+
\u5728\u5F00\u53D1\u4E2D\uFF0C\u53EF\u4EE5\u5229\u7528\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1\u7684\u4E91\u5B58\u50A8\u80FD\u529B\uFF0C\u5C06\u56FE\u7247\u4E0A\u4F20\u81F3\u4E91\u5B58\u50A8\u5185\u3002\u7136\u540E\u6839\u636E\u8FD4\u56DE\u7684fileiId
\u6765\u4E0B\u8F7D\u56FE\u7247\u3001\u5220\u9664\u56FE\u7247\u548C\u66FF\u6362\u4E34\u65F6\u94FE\u63A5\u3002
// \u4E0A\u4F20\u56FE\u7247
+uploadToCloud() {
+ wx.cloud.init();
+ const { fileList } = this.data;
+ if (!fileList.length) {
+ wx.showToast({ title: '\u8BF7\u9009\u62E9\u56FE\u7247', icon: 'none' });
+ } else {
+ const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(\`my-photo\${index}.png\`, file));
+ Promise.all(uploadTasks)
+ .then(data => {
+ wx.showToast({ title: '\u4E0A\u4F20\u6210\u529F', icon: 'none' });
+ const newFileList = data.map(item => ({ url: item.fileID }));
+ this.setData({ cloudPath: data, fileList: newFileList });
+ })
+ .catch(e => {
+ wx.showToast({ title: '\u4E0A\u4F20\u5931\u8D25', icon: 'none' });
+ console.log(e);
+ });
+ }
+}
+
+uploadFilePromise(fileName, chooseResult) {
+ return wx.cloud.uploadFile({
+ cloudPath: fileName,
+ filePath: chooseResult.url
+ });
+}
+
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
name | \u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6 | string | number | - |
accept | \u63A5\u53D7\u7684\u6587\u4EF6\u7C7B\u578B, \u53EF\u9009\u503C\u4E3Aall media image file video | string | image |
sizeType | \u6240\u9009\u7684\u56FE\u7247\u7684\u5C3A\u5BF8, \u5F53accept \u4E3Aimage \u7C7B\u578B\u65F6\u8BBE\u7F6E\u6240\u9009\u56FE\u7247\u7684\u5C3A\u5BF8\u53EF\u9009\u503C\u4E3Aoriginal compressed | string[] | ['original','compressed'] |
preview-size | \u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | string | number | 80px |
preview-image | \u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE | boolean | true |
preview-full-image | \u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8 | boolean | true |
multiple | \u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301 | boolean | false |
disabled | \u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20 | boolean | false |
show-upload | \u662F\u5426\u5C55\u793A\u6587\u4EF6\u4E0A\u4F20\u6309\u94AE | boolean | true |
deletable | \u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE | boolean | true |
capture | \u56FE\u7247\u6216\u8005\u89C6\u9891\u9009\u53D6\u6A21\u5F0F\uFF0C\u5F53accept \u4E3Aimage \u7C7B\u578B\u65F6\u8BBE\u7F6Ecapture \u53EF\u9009\u503C\u4E3Acamera \u53EF\u4EE5\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934 | string | string[] | ['album', 'camera'] |
max-size | \u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3Abyte | number | - |
max-count | \u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236 | number | - |
upload-text | \u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A | string | - |
image-fit | \u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8Fimage \u7EC4\u4EF6\u7684mode \u5C5E\u6027 | string | scaleToFill |
use-before-read | \u662F\u5426\u5F00\u542F\u6587\u4EF6\u8BFB\u53D6\u524D\u4E8B\u4EF6 | boolean | - |
camera | \u5F53 accept \u4E3A video \u65F6\u751F\u6548\uFF0C\u53EF\u9009\u503C\u4E3A back front | string | - |
compressed | \u5F53 accept \u4E3A video \u65F6\u751F\u6548\uFF0C\u662F\u5426\u538B\u7F29\u89C6\u9891\uFF0C\u9ED8\u8BA4\u4E3Atrue | boolean | - |
max-duration | \u5F53 accept \u4E3A video \u65F6\u751F\u6548\uFF0C\u62CD\u6444\u89C6\u9891\u6700\u957F\u62CD\u6444\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2 | number | - |
upload-icon | \u4E0A\u4F20\u533A\u57DF\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | string | plus |
\u53C2\u6570 | \u8BF4\u660E |
---|---|
media | \u56FE\u7247\u548C\u89C6\u9891 |
image | \u56FE\u7247 |
video | \u89C6\u9891 |
file | \u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u56FE\u7247\u548C\u89C6\u9891\u4EE5\u5916\u7684\u6587\u4EF6 |
all | \u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u6240\u6709\u6587\u4EF6 |
file-list
\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u5305\u542B\u4EE5\u4E0B key
\u3002
\u53C2\u6570 | \u8BF4\u660E |
---|---|
url | \u56FE\u7247\u548C\u89C6\u9891\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740 |
name | \u6587\u4EF6\u540D\u79F0\uFF0C\u89C6\u9891\u5C06\u5728\u5168\u5C4F\u9884\u89C8\u65F6\u4F5C\u4E3A\u6807\u9898\u663E\u793A |
thumb | \u56FE\u7247\u7F29\u7565\u56FE\u6216\u89C6\u9891\u5C01\u9762\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740\uFF0C\u4EC5\u5BF9\u56FE\u7247\u548C\u89C6\u9891\u6709\u6548 |
type | \u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503Cimage video file |
isImage | \u624B\u52A8\u6807\u8BB0\u56FE\u7247\u8D44\u6E90 |
isVideo | \u624B\u52A8\u6807\u8BB0\u89C6\u9891\u8D44\u6E90 |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
- | \u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
bind:before-read | \u6587\u4EF6\u8BFB\u53D6\u524D\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06use-before-read \u5C5E\u6027\u8BBE\u7F6E\u4E3Atrue | event.detail.file : \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6\uFF0Cevent.detail.callback : \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528callback(false) \u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6 |
bind:after-read | \u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E | event.detail.file : \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6 |
bind:oversize | \u6587\u4EF6\u8D85\u51FA\u5927\u5C0F\u9650\u5236 | - |
bind:click-preview | \u70B9\u51FB\u9884\u89C8\u56FE\u7247 | event.detail.index : \u70B9\u51FB\u56FE\u7247\u7684\u5E8F\u53F7\u503C |
bind:delete | \u5220\u9664\u56FE\u7247 | event.detail.index : \u5220\u9664\u56FE\u7247\u7684\u5E8F\u53F7\u503C |
f?ee(e,o,s,!0,!1,p):F(t,n,r,o,s,l,i,c,p)},K=(e,t,n,r,o,s,l,i,c)=>{let a=0;const f=t.length;let p=e.length-1,d=f-1;for(;a<=p&&a<=d;){const r=e[a],u=t[a]=c?wr(t[a]):_r(t[a]);if(!ur(r,u))break;_(r,u,n,null,o,s,l,i,c),a++}for(;a<=p&&a<=d;){const r=e[p],a=t[d]=c?wr(t[d]):_r(t[d]);if(!ur(r,a))break;_(r,a,n,null,o,s,l,i,c),p--,d--}if(a>p){if(a<=d){const e=d+1,u=ehs(e,s)))?r.push(s):n.push(s));const i=e.matched[l];i&&(t.matched.find((e=>hs(e,i)))||o.push(i))}return[n,r,o]}(e,t);n=xl(r.reverse(),"beforeRouteLeave",e,t);for(const s of r)s.leaveGuards.forEach((r=>{n.push(wl(r,e,t))}));const c=b.bind(null,e,t);return n.push(c),Fl(n).then((()=>{n=[];for(const r of s.list())n.push(wl(r,e,t));return n.push(c),Fl(n)})).then((()=>{n=xl(o,"beforeRouteUpdate",e,t);for(const r of o)r.updateGuards.forEach((r=>{n.push(wl(r,e,t))}));return n.push(c),Fl(n)})).then((()=>{n=[];for(const r of e.matched)if(r.beforeEnter&&t.matched.indexOf(r)<0)if(Array.isArray(r.beforeEnter))for(const o of r.beforeEnter)n.push(wl(o,e,t));else n.push(wl(r.beforeEnter,e,t));return n.push(c),Fl(n)})).then((()=>(e.matched.forEach((e=>e.enterCallbacks={})),n=xl(i,"beforeRouteEnter",e,t),n.push(c),Fl(n)))).then((()=>{n=[];for(const r of l.list())n.push(wl(r,e,t));return n.push(c),Fl(n)})).catch((e=>Us(e,8)?e:Promise.reject(e)))}function w(e,t,n){for(const r of i.list())r(e,t,n)}function x(e,t,n,r,s){const l=v(e,t);if(l)return l;const i=t===Ms,a=is?history.state:{};n&&(r||i?o.replace(e.fullPath,cs({scroll:i&&a&&a.scroll},s)):o.push(e.fullPath,s)),c.value=e,F(e,t,n,i),R()}let C;function E(){C=o.listen(((e,t,n)=>{let r=d(e);const s=g(r);if(s)return void y(cs(s,{replace:!0}),r).catch(us);a=r;const l=c.value;var i,u;is&&(i=ks(l.fullPath,n.delta),u=Ss(),Os.set(i,u)),_(r,l).catch((e=>Us(e,12)?e:Us(e,2)?(y(e.to,r).catch(us),Promise.reject()):(n.delta&&o.go(-n.delta,!1),O(e)))).then((e=>{(e=e||x(r,l,!1))&&n.delta&&o.go(-n.delta,!1),w(r,l,e)})).catch(us)}))}let S,A=_l(),k=_l();function O(e){return R(e),k.list().forEach((t=>t(e))),Promise.reject(e)}function R(e){S||(S=!0,E(),A.list().forEach((([t,n])=>e?n(e):t())),A.reset())}function F(t,n,r,o){const{scrollBehavior:s}=e;if(!is||!s)return Promise.resolve();let l=!r&&function(e){const t=Os.get(e);return Os.delete(e),t}(ks(t.fullPath,0))||(o||!r)&&history.state&&history.state.scroll||null;return ro().then((()=>s(t,n,l))).then((e=>e&&As(e))).catch(O)}const P=e=>o.go(e);let $;const T=new Set;return{currentRoute:c,addRoute:function(e,n){let r,o;return js(e)?(r=t.getRecordMatcher(e),o=n):o=e,t.addRoute(o,r)},removeRoute:function(e){let n=t.getRecordMatcher(e);n&&t.removeRoute(n)},hasRoute:function(e){return!!t.getRecordMatcher(e)},getRoutes:function(){return t.getRoutes().map((e=>e.record))},resolve:d,options:e,push:m,replace:function(e){return m(cs(h(e),{replace:!0}))},go:P,back:()=>P(-1),forward:()=>P(1),beforeEach:s.add,beforeResolve:l.add,afterEach:i.add,onError:k.add,isReady:function(){return S&&c.value!==Ms?Promise.resolve():new Promise(((e,t)=>{A.add([e,t])}))},install(e){e.component("RouterLink",El),e.component("RouterView",Ol),e.config.globalProperties.$router=this,Object.defineProperty(e.config.globalProperties,"$route",{get:()=>ht(c)}),is&&!$&&c.value===Ms&&($=!0,m(o.location).catch((e=>{})));const t={};for(let r in Ms)t[r]=yt((()=>c.value[r]));e.provide(os,this),e.provide(ss,et(t)),e.provide(ls,c);let n=e.unmount;T.add(e),e.unmount=function(){T.delete(e),T.size<1&&(C(),c.value=Ms,$=!1,S=!1),n()}}}}function Fl(e){return e.reduce(((e,t)=>e.then((()=>t()))),Promise.resolve())}export{Yn as F,zt as K,Bo as T,ir as a,Cr as b,cr as c,hr as d,vr as e,br as f,n as g,gr as h,Er as i,Ln as j,At as k,Rl as l,Ts as m,l as n,rr as o,St as p,ro as q,Gn as r,Jo as s,i as t,yr as u,Xo as v,kt as w,po as x,Kn as y};
diff --git a/index.html b/index.html
index ae3a45f7..0424005a 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,9 @@