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

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

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

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


 

直接上代码:

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 组件的原生样式隐藏掉,然后就可以自定义样式了。

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

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

上一篇:小程序登录过程简介


下一篇:微信小程序——button, swiper等默认样式更改