微信小程序 - 自定义switch切换

直接上代码

 wxml代码

<view class="switch">
        <view class="switchNums {{w_num == 0?'currentNum':''}}" bindtap="switchChange" data-index="0">{{selectItem[0]}} </view>
        <view class="switchNums {{w_num == 1?'currentNum':''}}" bindtap="switchChange" data-index="1">{{selectItem[1]}} </view>
</view>

js代码

data: {
    selectItem: ["自提", "外卖"],
    w_num: 0,
  },

  switchChange(e) {
    var currentTarget = e.currentTarget;
    var tab = currentTarget.dataset.index;
    if (tab == 0) {
      this.setData({
        w_num: 0,
      })
    } else {
      this.setData({
        w_num: 1,
      })
    }
  },

wxss代码

.switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 54rpx;
  border-radius: 54rpx;
  background: #f7f7fb;
  width: 20%;
  border: 1px solid rgb(243, 240, 240);
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.1);
  margin-top: 10rpx;
}

.switch view {
  transition: all 0.25s linear;
}

.switchNums {
  width: 100rpx;
  height: 54rpx;
  line-height: 54rpx;
  border-radius: 54rpx;
  text-align: center;
  color: #C1C1C1;
  font-size: 28rpx;
}

.currentNum {
  color: white;
  background-color: green;
  margin: 1rpx;
}