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

Posted java1234_小锋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 开关选择器 switch 组件相关的知识,希望对你有一定的参考价值。

完整微信小程序(Java后端) 技术贴目录清单页面(必看)

开关选择器。

属性类型默认值必填说明最低版本
checkedbooleanfalse是否选中1.0.0
disabledbooleanfalse是否禁用1.0.0
typestringswitch样式,有效值:switch, checkbox1.0.0
colorstring#04BE02switch 的颜色,同 css 的 color1.0.0
bindchangeeventhandlechecked 改变时触发 change 事件,event.detail={ value}1.0.0

Bug & Tip

  1. 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)

运行效果:

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

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

以上是关于微信小程序 开关选择器 switch 组件的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序把玩(二十一)switch组件

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

微信小程序代码片段

微信小程序组件解读和分析:十picker滚动选择器

微信小程序uniapp封装多列选择器组件

微信小程序实现地址选择组件