标签：osi png ext opacity mis pre 十分 one after
小程序里面的 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 组件的原生样式隐藏掉，然后就可以自定义样式了。
解决方案并不是十分优雅，但确实能够满足需求，大家有更好的方法不要忘了分享哦～
标签：osi png ext opacity mis pre 十分 one after
原文地址：https://www.cnblogs.com/bytechow/p/9592181.html
