【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）

最终效果：

左右文字宽度相同

左右文字宽度不同

左右长度相同

效果：配合wx:show切换

注意：左右长度相同的话可以设置合适的相同的宽度。

html：

<view class="switch"><viewclass="switchNums {{ switchChecked == true ? 'currentNum' : '' }}"bindtap="switchChange"data-index="0">{{ selectOpen[0] }}</view><viewclass="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.switchCheckedconsole.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;
}

效果：