微信小程序 switch组件详解及简单实例

微信小程序switch
相关文章：
微信小程序 Button
微信小程序 radio
微信小程序 slider
微信小程序 switch
微信小程序 textarea
微信小程序 picker-view
微信小程序 picker
微信小程序 label
微信小程序 input

微信小程序 form
微信小程序 checkbox

实现效果图：
switch

开关选择器

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

示例代码：

<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>

var pageData = { data: { switch1Checked: true, switch2Checked: false, switch1Style: "", switch2Style: "text-decoration: line-through" }}for（var i = 1; i <= 2; ++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）

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！