微信小程序开关选择器 switch 组件

小鱼儿 2021-09-08 01:42 434阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

开关选择器。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">checked</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否选中</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">disabled</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否禁用</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">string</td> 
   <td align="left">switch</td> 
   <td align="left">否</td> 
   <td align="left">样式，有效值：switch, checkbox</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">string</td> 
   <td align="left">#04BE02</td> 
   <td align="left">否</td> 
   <td align="left">switch 的颜色，同 css 的 color</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">checked 改变时触发 change 事件，event.detail={ value}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`: switch类型切换时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

**示例代码**

[在开发者工具中预览效果][Link 1]

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)

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcXqifCH-1622438487517)(image-20210531095555928.png)\]][img-RcXqifCH-1622438487517_image-20210531095555928.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/6db9lcmu6VYt
[img-RcXqifCH-1622438487517_image-20210531095555928.png]: /images/20210716/e5af71c52a5044eb998f6938a18a2cf7.png