最終効果:
左右の文字幅が同じ
左右の文字幅が異なる
左右同じ長さ
効果：座標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}}
参考：
小番組スイッチにテキスト表示を追加する_小番組スイッチにリマインダーを追加する方法_ハンシェフの夢のブログ - CSDNブログ
左右の長さが違う
好き：
幅と高さが十分でなく、片側に多くのテキストがある場合、テキストの折り返しの問題が発生する可能性があります。
テキストの折り返しの理由: テキストの幅が外側のブロック レベル要素によって設定された幅よりも大きい
したがって、幅を設定せずにパディングを設定し、パディングで距離を開くことができます。幅が設定されていない場合、改行はなく、距離は単語数に応じて長さに適応します. パディングを追加して、距離が美しくなるようにします.
上記のように、左側を広くしたい場合は、別途パディングを追加できます。
左右の長さが違う＋インラインブロック
実際、必要なスイッチは通常、回線を占有しません。つまり、ブロックレベルの要素は必要ありません。
ただし、スイッチ スイッチは通常、次の場合に背景色を持ちます。
- ブロックレベルの要素です
- 幅が設定されていません
次に、行全体がスイッチの背景色になり、見栄えが悪くなります。
幅が設定されている場合、背景色は幅と同じ幅になりますが、異なる画面では解像度の問題により、テキストの折り返しの問題が発生する場合があります。もちろん、外部スイッチ クラスの幅を非常に大きくして、テキスト + パディングをスイッチの幅よりも小さくすることができますが、これにより、外部背景色の幅がスイッチよりも大幅に大きくなります。 .
解決：インラインブロックを使用する
要素が1 行を占めるのではなく、幅と高さの属性も設定する必要がある場合は、インライン ブロックを選択できます。
効果：
- スイッチの幅は、テキストの長さとパディングに応じて調整されます
- 背景色は上記の幅に適応します（つまり、上記の幅の幅は背景色と同じ大きさです）
- テキストの折り返しの問題はありません (テキストの折り返しの問題の本質: テキストの幅 > 幅の設定)
.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;
}
効果：
