当前位置 博文首页 > java1234的博客:微信小程序 开关选择器 switch 组件

    java1234的博客:微信小程序 开关选择器 switch 组件

    作者:[db:作者] 时间:2021-06-03 11:32

    完整微信小程序(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】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。