SwitchCell 开关单元格

使用指南

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

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

代码演示

基础用法

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

禁用状态

通过disabled属性可以将组件设置为禁用状态

  1. <van-switch-cell
  2. disabled
  3. title="标题"
  4. checked="{{ checked }}"
  5. bind:change="onChange"
  6. />

加载状态

通过loading属性可以将组件设置为加载状态

  1. <van-switch-cell
  2. loading
  3. title="标题"
  4. checked="{{ checked }}"
  5. bind:change="onChange"
  6. />

API

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

Event

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

更新日志

版本类型内容
0.2.0feature新增组件
0.2.1feature支持在原生 form 组件内使用

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