淘宝开放平台

登录
文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

switch

更新时间：2020/08/26 访问次数：3477

单选项目。

 

属性

参数 说明 类型 默认值
checkedChildren 打开时的内容

String

 -
size switch的尺寸

可选值:
'medium'(正常大小)
'small'(缩小版大小)		 Enum 'medium'
unCheckedChildren 关闭时的内容 String -
onChange 开关状态改变是触发此事件 Function  
checked 开关当前的值(针对受控组件) Boolean -
defaultChecked 开关默认值 (针对非受控组件) Boolean -
disabled 表示开关被禁用 Boolean false
onTap 鼠标点击事件 Function -

  

Demo示例

 

示例代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class="com-wrap">
  <view class="com-title">简单</view>
  <switch checkedChildren="on" unCheckedChildren="off" />
  <switch defaultChecked="false" size="small" class="mr" />
  <switch checkedChildren="on" unCheckedChildren="off please" class="mr large-width" />
 
  <view class="com-title">受控开关</view>
  <switch checked="{{checked}}" onChange="onChange"/>
  <switch checked="{{checked}}" disabled  class="mr"/>
 
  <view class="com-title">禁用状态</view>
  <switch disabled  />
  <switch checkedChildren="on" unCheckedChildren="off" disabled class="mr"/>
 
</view>

 

1
2
3
4
5
6
7
8
9
10
// API-DEMO page/component/switch/switch.js
Page({
  data: {
    checked: false
  },
  onChange(val) {
      let checked = val.detail.value;
      this.setData({ checked });
    }
});

 

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部