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

news2024/11/17 9:13:39

最终效果:

左右文字宽度相同
在这里插入图片描述
左右文字宽度不同
在这里插入图片描述

左右长度相同

效果:配合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;
}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/438302.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是Web1.0时代、Web2.0时代、Web3.0时代?

什么是Web1.0时代、Web2.0时代、Web3.0时代&#xff1f; 互联网的起源。1969年美国的阿帕网的出现标志着互联网的诞生&#xff0c;而1973年第一台个人电脑The Xerox Alto的出现就预示了互联网将蓬勃生长&#xff0c;随之而来的就是我们迈入了信息时代。短短几十年的发展&#x…

【服务器数据恢复】Storwize存储上的Oracle数据库数据恢复案例

服务器数据恢复环境&#xff1a; IBM Storwize某型号存储&#xff0c;共10块磁盘&#xff0c;组建了2组Mdisk加入到一个存储池中&#xff0c;创建了一个通用卷存放数据&#xff0c;存放的数据包含oracle数据库。 服务器故障&#xff1a; 存储中其中一组Mdisk有两块磁盘出现故障…

三百左右蓝牙耳机选哪个?300元左右半入耳式耳机推荐

目前TWS耳机十分火热&#xff0c;成为许多人出行、娱乐的必要工具&#xff0c;但同时许多厂商也看到了这块的市场&#xff0c;大小品牌、各种形态的耳机产品应有尽有&#xff0c;某宝随便一搜就是几万个链接&#xff0c;下面整理了几款300左右价位的耳机品牌分享给大家。 一、南…

【GPT4】微软 GPT-4 测试报告(2)多模态与跨学科的组合

欢迎关注【youcans的AGI学习笔记】原创作品&#xff0c;火热更新中 微软 GPT-4 测试报告&#xff08;1&#xff09;总体介绍 微软 GPT-4 测试报告&#xff08;2&#xff09;多模态与跨学科能力 微软 GPT-4 测试报告&#xff08;3&#xff09;编程能力 微软 GPT-4 测试报告&…

【服务器】XShell报错:应用程序无法正常启动(0xc000007b)

XShell报错&#xff1a;应用程序无法正常启动(0xc000007b) 某一天&#xff0c;Win上XShell启动时突然报错如下&#xff1a; 报错信息&#xff1a;应用程序无法正常启动(0x000007b)。请单击“确定”关闭应用程序。 卸载XShell重装后该问题仍然存在。 解决方法&#xff1a; 下…

设计模式 -- 迭代器模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

107页园区大数据治理解决方案2022(ppt可编辑)

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。 篇幅有限&#xff0c;无法完全展示&#xff0c;喜欢资料可转发评论&#xff0c;私信了解更多信息。

强训之【求最大连续的bit数和最近公共祖先】

目录 1.求最大连续的bit数1.1题目1.2思路1.2.1暴力求解1.2.2 字符串分割求解1.2.3 位运算“与”求解 1.3代码1.3.1暴力求解代码1.3.2字符串分割求解代码1.3.3位运算“与”求解 2.最近公共祖先2.1题目2.2思路2.3代码 3.选择题 1.求最大连续的bit数 1.1题目 链接: link 描述 求…

《花雕学AI》21:ChatGPT能否应对脑筋急转弯?逻辑推理和创造性思维的大考验!

当我们谈到脑筋急转弯时&#xff0c;很多人都会感到兴趣和好奇。脑筋急转弯是一种智力游戏&#xff0c;可以锻炼我们的思维能力以及解决问题的能力。然而&#xff0c;对于许多人来说&#xff0c;脑筋急转弯也是一项相当具有挑战性的任务。在这个过程中&#xff0c;我们需要运用…

RISE with SAP,亚马逊云科技开启全新的SAP现代化之路

在不确定性依然存在的当下&#xff0c;快速进行现代化转型与创新&#xff0c;是企业走向成功的必经之路。而现代化转型与创新对于众多企业而言&#xff0c;意味着对SAP进行现代化改造。实现这一改造&#xff0c;能为企业带来包括创新业务模型、快速响应客户不断变化的需求、增加…

推荐系统数据集之MovieLens

1.概述 MovieLens其实是一个推荐系统和虚拟社区网站&#xff0c;它由美国 Minnesota 大学计算机科学与工程学院的GroupLens项目组创办&#xff0c;是一个非商业性质的、以研究为目的的实验性站点。GroupLens研究组根据MovieLens网站提供的数据制作了MovieLens数据集合&#xff…

带有MCU算法的多功能语音交互芯片,OTA升级语音ic,WTV380-32N

几年来&#xff0c;随着智能家居、安防报警、医疗器械 等领域的快速发展&#xff0c;语音交互技术越来越受到人们的关注和青睐。作为智能硬件的重要组成部分&#xff0c;语音芯片的发展也变得越来越重要&#xff0c;针对这一市场需求&#xff0c;我们推出了一款多功能的语音芯片…

layout布局input框输入中文出现撑开/换行

layout布局input框输入中文出现撑开/换行 问题 element ui组件库中提供了layout布局&#xff0c;但是在使用中出现了一个奇奇怪怪的问题 我想要实现的布局是两个输入框排成一行&#xff0c;行与行之间样式布局不会互相影响 直接上代码&#xff1a; <el-row :gutter&quo…

海康相机通过MVS达不到标称最大帧率的解决办法

目录 1.相机参数设置1.1 取消相机帧率限制1.2 修改相机图像格式1.3 调整相机曝光时间1.4 检查相机数据包大小&#xff08;网口相机特有参数&#xff09;1.5 恢复相机默认参数1.6 相机 ADC 输出位深调整 2.系统环境设置2.1 网口相机设置2.2 USB 相机设置 1.相机参数设置 1.1 取…

pycharm flask断点调试失效

问题描述 在升级本地pycharm为最新版pycharm2023.1后&#xff0c;发现原有的flask项目下的断点怎么都无法进入调试。同时&#xff0c;如果是debug某个py文件是可以正常进入调试的&#xff0c;因此推断这与flask有关。 pycharm&#xff1a;PyCharm 2023.1 (Professional Editio…

STM32HAL库 OLED显示屏的使用

文章目录 前言一、CubeIDE配置OLED显示屏iic引脚二、OLED驱动库1.引入库2.main.c中使用 总结 前言 本文主要讲解hal库配置与0.96寸oled屏的使用。 一、CubeIDE配置OLED显示屏iic引脚 OLED显示屏需要用到iic通信&#xff0c;此处选择了选择pb8为SCL、pb9为SDA 二、OLED驱动…

vue2数据响应式原理(1) view-model概念,侵入式和非侵入式对比

都是练拳不练功 到头一场空 在更新技术视野的前提下 还是要去多学原理 掌握更深的技术范畴 我会先出文后续持续更新 讲解vue2响应式原理 至于vue3 后续有机会 也会弄 这些文章不会直降理论 到一定阶段 也会带大家手写代码去实现一下效果 首先是 view-model 大家在实际开发中应…

SpringBoot集成Mybatis-Plus实现多租户动态数据源

1. 概述 最近接手一个多租户系统&#xff0c;多租户主要的就是租户之间的数据是相互隔离的&#xff0c;每个租户拥有自己独立的数据&#xff0c;相互之间不干扰。目前实现多租户主要有三种方案&#xff1a; 独立数据库 每个租户拥有自己单独的数据库&#xff0c;从物理上隔离了…

Java语言数据类型与c语言数据类型的不同

目录 一、c语言数据类型 1.基本类型&#xff1a; 2.枚举类型&#xff1a; 3.空类型&#xff1a; 4.派生类型&#xff1a; 二、C语言编程需要注意的64位和32机器的区别 三、 不同之处 一、c语言数据类型 首先&#xff0c;先来整体介绍一下C语言的数据类型分类。 1.基…

空间金字塔池化(Spatial Pyramid Pooling)

1. 前言 当前的深度神经网络一般都需要固定的输入图像尺寸&#xff08;如224*224&#xff09;。这种需求很明显是人为的&#xff0c;潜在性的弊端会降低识别精度&#xff08;为了使图像尺寸相同&#xff0c;一定会涉及到图像的比例/非比例放缩&#xff0c;这就引入了尺度误差和…