Switch 开关

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-switch": "path/to/vant-weapp/dist/switch/index"
  3. }

代码演示

基础用法

  1. <van-switch checked="{{ checked }}" bind:change="onChange" />
  1. Page({
  2.   data: {
  3.     checked: true
  4.   },
  6.   onChange({ detail }) {
  7.     // 需要手动对 checked 状态进行更新
  8.     this.setData({ checked: detail });
  9.   }
  10. });

禁用状态

  1. <van-switch checked="{{ checked }}" disabled />

加载状态

  1. <van-switch checked="{{ checked }}" loading />

自定义大小

  1. <van-switch checked="{{ checked }}" size="24px" />

自定义颜色

  1. <van-switch
  2.   checked="{{ checked }}"
  3.   active-color="#07c160"
  4.   inactive-color="#f44"
  5. />

异步控制

  1. <van-switch
  2.   checked="{{ checked }}"
  3.   bind:change="onChange"
  4. />
  1. Page({
  2.   data: {
  3.     checked: true
  4.   },
  6.   onChange({ detail }) {
  7.     wx.showModal({
  8.       title: '提示',
  9.       content: '是否切换开关？',
  10.       success: res => {
  11.         if (res.confirm) {
  12.           this.setData({ checked2: detail });
  13.         }
  14.       }
  15.     });
  16.   }
  17. });

API

参数说明类型默认值
name在表单内提交时的标识符String-
checked开关选中状态anyfalse
loading是否为加载状态Booleanfalse
disabled是否为禁用状态Booleanfalse
size开关尺寸String30px
active-color打开时的背景色String#1989fa
inactive-color关闭时的背景色String#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Event

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类

更新日志

版本类型内容
0.0.1feature新增组件
0.1.1bugfix修复组件无法开关的问题
0.2.1feature支持在原生 form 组件内使用

原文: https://youzan.github.io/vant-weapp/#/switch