模仿微信小程序switch组件

微信小程序官方文档提供了switch组件，通过点击该组件，可以很好的实现一个按钮滑动开关的效果。 微信小程序文档

如图可以看到，switch组件的开关按钮，点击的时候很顺滑，并随一定的变化效果，那么它是如何实现的呢，我们可以模仿写一个。

这是目前在网上找到的一个比较靠谱的文档微信小程序----switch组件实现

但是，这篇文档是从js原生角度来实现，下面👇，我带大家在微信小程序上，实现一个switch按钮，并运用到实际项目中。

思路：

1. 首先需要有一个底层按钮滑动的区域
2. 其次是在滑动区域上面叠加一个区域，用来实现按钮滑动时候背景的展示与隐藏
3. 最后在上面添加按钮，通过css的transition的transform属性实现滑动

wxml

<view class="switch-list">
  <view class="fui-switch {{isClose?'':'test1'}}" type="checkbox" bindtap="testTap"></view>
</view>

wxss

.switch-list{
   padding: 50rpx;
}
/* 最底层的一个椭圆区域
   当前设置颜色为蓝色
 */
.fui-switch{
    width: 87rpx;
    height: 50rpx;
    border-radius: 25rpx;
    background-color: #599cf3;
    position: relative;
}
/* 上面盖上一层白色的椭圆区域以及一个白色的按钮 */
.fui-switch::after,.fui-switch::before{
    content: "";
    position: absolute;
    height: 50rpx;
    top: 0rpx;
    left: -1rpx;
    border-radius: 25rpx;
    border:1rpx solid #dfdfdf;
    transition-duration: .3s;
}
.fui-switch:before {
    width: 90rpx;
    background-color: #fdfdfd; 
}
/* 当用户点击打开的时候，白色椭圆会缩小至消失，反之则恢复 */
.fui-switch.test1:before{ 
    transform: scale(0);
}
.fui-switch:after {
    width: 48rpx;
    background-color: #fff;
}
/* 当用户点击打开的时候，按钮会右滑 */
.fui-switch.test1:after {
    transform: translateX(42rpx);
}

说明：在样式中，主要使用来transition，transform等用来实现动画的属性，可以参考developer.mozilla.org/zh-CN/docs/…

js

Page({
  data: {
    isClose:true
  },
  
  onLoad: function () {
    
  },
  testTap:function(){
    this.setData({
      isClose: !this.data.isClose
    })
  }
 })

结语

通过了解一些原生组件的实现原理或者通过去模仿组件实现，不断提高自己对于一些样式效果的理解，从而能够更好的运用的实际工作中。