小程序 switch 上添加文字显示

wxml 代码

<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>

css 代码

.switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width:120px;
  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;
}

js中需要设置默认选中 和文字显示

  data: {
    selectOpen:["展开","收起"],
    _num:0,
    }

效果展示 

1

 

2