switch

开关选择器。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">switch</text>
        <text class="page__desc">开关</text>
    </view>
    <view class="page__bd">
        <view class="section section_gap">
            <view class="section__title">type="switch"</view>
            <view class="body-view">
                <switch checked="{{switch1Checked}}" bindchange="switch1Change" />
            </view>
        </view>
        <view class="section section_gap">
            <view class="section__title">type="checkbox"</view>
            <view class="body-view">
                <switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change" />
            </view>
        </view>
        <view class="section section_gap">
            <view class="section__title">color</view>
            <view class="body-view">
                <switch color="#10a5ec" checked="{{switch3Checked}}" bindchange="switch3Change" />
            </view>
        </view>
        <view class="section section_gap">
            <view class="section__title">disabled</view>
            <view class="body-view">
                <switch disabled  type="checkbox" checked="{{switch4Checked}}" bindchange="switch4Change" />
            </view>
        </view>
        <view>switch1Style:{{switch1Style}}</view>
        <view>switch2Style:{{switch2Style}}</view>

    </view>
</view>

JS

var pageData = {
  data: {
    switch1Checked: true,
    switch2Checked: false,
    switch3Checked: true,
    switch4Checked: false,
    switch1Style: '',
    switch2Style: 'text-decoration: line-through'
  }
}
for (var i = 1; i <= 4; ++i) {
  (function (index) {
    pageData[`switch${index}Change`] = function (e) {
      console.log(`switch${index}发生change事件，携带值为`, e.detail.value)
      var obj = {}
      obj[`switch${index}Checked`] = e.detail.value
      this.setData(obj)
      obj = {}
      obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
      this.setData(obj)
    }
  })(i)
}
Page(pageData)

API

属性	类型	默认值	必填	说明
checked	boolean	false	否	是否选中
disabled	boolean	false	否	是否禁用
type	string	switch	否	样式，有效值：switch, checkbox
color	string	#04BE02	否	switch 的颜色，同 css 的 color
bindchange	eventhandle		否	checked 改变时触发 change 事件，event.detail={ value}

多平台支持

属性	平台支持
checked	支付宝
disabled	支付宝
type
color	支付宝
bindchange	支付宝