小程序极速实战开发《十五》switch 开关选择器

作者：模板之家 2018-1-25 16:30 1977人关注

组件说明: switch，开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。组件用法： wxml view class=section section text class=titleswitch style/text view class=body-view switch checked bin

组件说明:

switch，开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。

组件用法：

wxml

<view class="section section">
<text class="title">switch style</text>
<view class="body-view">
<switch checked bindchange="switch1Change"/>
</view>
</view>
<view class="section section">
<text class="title">switch style</text>
<view class="body-view">
<switch bindchange="switch2Change"/>
</view>
</view>
<view class="section section">
<text class="title">checkbox style</text>
<view class="body-view">
<switch type="checkbox" checked bindchange="switch1Change"/>
</view>
</view>
<view class="section section">
<text class="title">checkbox style</text>
<view class="body-view">
<switch type="checkbox" bindchange="switch2Change"/>
</view>
</view>
<view class="section section">
<text class="title">西游记里都有谁</text>
<view class="body-view">
<switch type="checkbox" checked bindchange="switch2Change"/><text class="title">牛魔王</text>
</view>
<view class="body-view">
<switch type="checkbox" checked bindchange="switch2Change"/><text class="title">孙悟空</text>
</view>
<view class="body-view">
<switch type="checkbox" checked bindchange="switch2Change"/><text class="title">猪八戒</text>
</view>
<view class="body-view">
<switch type="checkbox" bindchange="switch2Change"/><text class="title">旗木卡卡西</text>
</view>
</view>

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

wxss

.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
overflow: hidden;
}

主要属性

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