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

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

图1：

图2：

---

 

直接上代码：

一、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>

二、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;
}

 三、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 组件的原生样式隐藏掉，而后就能够自定义样式了。

解决方案并非十分优雅，但确实可以知足需求，你们有更好的方法不要忘了分享哦～