微信小程序 开关选择器 switch 组件
Posted java1234_小锋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 开关选择器 switch 组件相关的知识,希望对你有一定的参考价值。
开关选择器。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
checked | boolean | false | 否 | 是否选中 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
type | string | switch | 否 | 样式,有效值:switch, checkbox | 1.0.0 |
color | string | #04BE02 | 否 | switch 的颜色,同 css 的 color | 1.0.0 |
bindchange | eventhandle | 否 | checked 改变时触发 change 事件,event.detail={ value} | 1.0.0 |
Bug & Tip
tip
: switch类型切换时在ios自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
示例代码
index.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>
</view>
index.js
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)
运行效果:
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。
以上是关于微信小程序 开关选择器 switch 组件的主要内容,如果未能解决你的问题,请参考以下文章