微信小程序-swicth改变样式

先上效果：

 wxml：

<view class='list_item' style='margin:0;'>
    <text>PPT需要speech draft</text>
    <view class='switch' bindtap='switchFirst'>
      <view class='switch_bar' style="{{switch_first?'background-color:#B6D2DB;':''}}"></view>
      <view class='switch_point' style="{{switch_first?'right:25rpx;':'right:80rpx;'}}"></view>
    </view> 
</view>

wcss：

.list_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0 25rpx;
  width:700rpx;
  font-size: 30rpx;
  color: rgb(79,79,79);
  padding: 28rpx 0;
  border-bottom:1px solid rgb(209,209,209); 
}
.switch{
  width: 120rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
}

.switch_bar{
  width: 70rpx;
  height: 20rpx;
  background-color: #E5E5E5;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx #bbb inset;
}

.switch_point{
  width: 40rpx;
  height: 40rpx;
  border-radius: 100%;
  background-color: #88C7DB;
  position: relative;
  box-shadow: 0 0 20rpx #B6D2DB;
}

js：

Page({

  data: {
    switch_first: 0,
    switch_second: 0
  },

  switchFirst:function(e){
    var switch_first = this.data.switch_first;
    this.setData({
      switch_first:!switch_first 
    })
  },
  switchSecond: function (e) {
    var switch_second = this.data.switch_second;
    this.setData({
      switch_second :!switch_second 
    })
  }
})