小程序 自定义switch 按钮上文字显示

<view class="switch" >

                    <view class="switchNums {{_num == 0?'currentNum':''}}"   bindtap="switchChange" data-index="0">{{selectOpen[0]}}                         </view>

                    <view class="switchNums {{_num == 1?'currentNum':''}}"  bindtap="switchChange" data-index="1">{{selectOpen[1]}}                            </view>

                </view>

 

 

data:{

   selectOpen:["展开","收起"],

_num:0,

}

 

 

js

 

      switchChange(_ref) {

        var currentTarget = _ref.currentTarget;

        var tab = currentTarget.dataset.index;

        if (tab == "0") {

            this.setData({

                _num:0,

                

            })  

        } else {

                this.setData({

                    _num:1,

                    

                })

            }

        },

 

 

css

.switch {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  height: 54rpx;

  border-radius: 54rpx;

  background: #f7f7fb;

}

.switchNums {

  width: 112rpx;

  height: 54rpx;

  line-height: 54rpx;

  border-radius: 54rpx;

  text-align: center;

  color: #C1C1C1;

  font-size: 28rpx;

  font-weight: bold;

  &.currentNum {

    background: #6a74c9;

    color: #ffffff;

  }

}