最终效果：
左右文字宽度相同
左右文字宽度不同
左右长度相同
效果：配合wx:show切换
注意：左右长度相同的话可以设置合适的相同的宽度。
html：
<view class="switch">
<view
class="switchNums {{ switchChecked == true ? 'currentNum' : '' }}"
bindtap="switchChange"
data-index="0"
>{{ selectOpen[0] }}
</view>
<view
class="switchNums {{ switchChecked == false ? '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: #1989FA;
color: #ffffff;
}
js：
data: {
selectOpen: ['扫码', '输入'],
switchChecked: true
}
methods:{
switchChange() {
this.switchChecked = !this.switchChecked
console.log('switchChecked', this.switchChecked)
}
}
配合wx:show：或true
wx:show="{{switchChecked===false}}
参考：
小程序 switch 上添加文字显示_小程序switch中怎么添加一个提示_梦到韩大厨的博客-CSDN博客
左右长度不同
如：
如果宽高不够，且一边文字更多，可能出现文本换行的问题。
文本换行原因：文本的宽度大于外层块级元素设置的宽度
因此我们可以不设置宽而设置padding，让padding撑开距离：没有设置宽就不会换行，距离随字数自适应长度，加点padding保证距离美观。
如上图，若希望左边的再宽一些就可以单独再加padding。
左右长度不同+inline-block
实际上，我们需要的switch开关一般不会占一行。即，我们并不需要块级元素。
然而，switch开关一般会有背景色，如果：
- 是块级元素
- 没有设置宽度
则一整行都会是switch的背景色，这并不好看：
若设置了宽度，背景色会只有宽度那么宽，但是，在不同屏幕上由于分辨率问题可能出现文本换行问题。我们当然可以使外面的switch类的宽度十分大，以使得 文字+padding 一定小于switch的宽，但是这会导致外部的背景色宽度明显大于switch。
解决方法：使用inline-block
当我们想要让一个元素既不独占一行，又可以设置其宽高属性的时候，我们就可以选择inline-block了。
效果：
- switch开关宽度随文字长度+padding自适应
- 背景色随上述宽度自适应（即上述宽度多宽，背景色就有多少）
- 不会出现文本换行问题（文本换行问题本质：文本宽度>设置宽度）
.switch {
display:inline-block;
height: 70rpx;
border-radius: 70rpx;
background: #f7f7fb;
}
.switchNums {
display:inline-block;
height: 70rpx;
line-height: 70rpx;
border-radius: 70rpx;
text-align: center;
color: #C1C1C1;
font-size: 28rpx;
font-weight: bold;
//加点padding撑开
padding:0 8px;
}
.currentNum {
background: #1989FA;
color: #ffffff;
}
效果：
