小程序中自定义swtich组件样式

Posted 2021-01-04 bytechow

小程序里面的 swtich 原生组件样式是下图1，难保设计师不会用图2之类的设计来代替：

图1：

图2：

---

 

直接上代码：

1、wxml

<label class="mist-checkbox-switch">
  <view class="checkbox">
    <view class="iconfont {{ checked ? ‘icon-checkbox-selected‘ : ‘icon-checkbox-unselected‘ }}"></view>
  </view><!--
  --><switch bindchange="toggle"></switch><!--
  --><text>{{ label }}</text>
</label>

2、wxss（注意上图2的勾勾是用的 iconfont，需要自己搜索下载）

@import ‘../../assets/wxss/iconfont.wxss‘;

/**
 * 隐藏原生
 */
switch{
  position:absolute;
  opacity: 0;
  top:0;
  bottom:0;
}
.wx-switch-input{
  width:0!important;
  height:0!important;
}
.wx-switch-input::before,
.wx-switch-input::after{
  width:0!important;
  height: 0!important;
}

.mist-checkbox-switch{
  position: relative;
  line-height: 48rpx;
}
.mist-checkbox-switch>.checkbox{
  display: inline-block;
  margin-right:24rpx;
  vertical-align: middle;
}
.mist-checkbox-switch>text{
  vertical-align: middle;
  color:#777;
  font-size:34rpx;
  line-height:48rpx;
}
.mist-checkbox-switch>.checkbox>.iconfont{
  font-size:48rpx;
  line-height:48rpx;
  color:#ccc;
}
.mist-checkbox-switch>.checkbox>.icon-checkbox-selected{
  color:#715efb;
}

 3、js

// components/mist_checkbox_switch/mist_checkbox_switch.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    label:{
      type: String,
    },
    checked:{ // 初始值输入，输出靠事件传递
      type: Boolean,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    checked: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toggle(e){
      const _val = e.detail.value
      this.setData({
        checked: _val
      })
      this.triggerEvent(‘toggle‘, {value: _val})
    }
  }
})

这里，有几处地方需要注意的。

首先，在wxml中，要用 label 标签包裹 switch 组件，然后再在 label 标签内部增加一个 text 标签用来显示说明文字，这样在点击说明文字的时候，也能触发 switch 的变更。

我们实际上是通过“组件变化通知页面相应 model 变化”的方式来实现，在 js 中我们先记录 switch 的默认值，这个默认值允许从页面中传递过来，然后我们监听组件的点击事件，每点击一次就更新一次组件 checked 变量的值，也就是 switch 的选中状态，同时我们会把这个状态通过事件通信的方式传递到页面上去，页面再更新数据，调用过程类似下面：

<mist-checkbox-switch label="客户需要选择到店时间" checked="{{ shouldSelectTime }}" bind:toggle="onToggleIsShowTime"></mist-checkbox-switch>

 onToggleIsShowTime(e) {
    this.setData({
      ‘shouldSelectTime‘: e.detail.value ? 1 : 0
    })
  },

最后，我们只需要想尽办法把原生 switch 组件的原生样式隐藏掉，然后就可以自定义样式了。

解决方案并不是十分优雅，但确实能够满足需求，大家有更好的方法不要忘了分享哦～