switch

优质

小牛编辑

130浏览

2023-12-01

switch

开关选择器。

属性名	类型	默认值	说明
hecked	Boolean	false	是否选中
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}
color	Color		switch 的颜色，同 css 的 color

示例代码

<!--switch.jxml-->
<view class="page-section page-section-gap">
        <view class="page-section-title">显示效果为 switch</view>
        <view class="body-view">
                <switch color="{{color}}" style="margin-right: 100rpx" bindchange="switch1Change" />
                <switch color="{{color}}" checked bindchange="switch2Change" />
        </view>    
</view>
<view class="page-section page-section-gap">
        <view class="page-section-title">显示效果为 checkbox</view>
        <view class="body-view">
                <switch color="{{color}}" style="margin-right: 170rpx" type="checkbox" bindchange="switch1Change" />
                <switch color="{{color}}" type="checkbox" checked bindchange="switch2Change" />
        </view>    
</view>
<view >设置当前 switch 颜色</view>
<view class="page-control">
        <view class="page-control-row">
            <radio-group class="radio-group control-radio" bindchange="changeColor">
                <label class="radio" jd:for="{{colorList}}" jd:key="{{item.name}}">
        <radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
        </label>
            </radio-group>
        </view>
</view>

//switch.js
Page({
  data: {
    color: '',
    colorList: [{
      name: 'blue',
      value: "蓝色"
    }, {
      name: '#333',
      value: "黑色"
    }, {
      name: '',
      value: "默认样式",
      checked: 'true'
    }],

  },

  switch1Change: function (e) {
    console.log('switch1 发生 change 事件，携带值为', e.detail.value);
  },
  switch2Change: function (e) {
    console.log('switch2 发生 change 事件，携带值为', e.detail.value);
  },
  changeColor(e) {
    console.log(e);
    this.setData({
      color: e.detail.value
    });
  }
});