收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

css实现开关组件效果，滑块组件效果。自己实现小程序滑块开关组件

1475人阅读 2024/6/5 11:49 总访问：5182726 评论：0 收藏：0 手机
分类: 前端

效果如下


切换的时候会有动态的效果

代码如下，纯HTML+CSS

样式里边的注释都写得比较清晰了，需要自定义效果，圆角什么的自行修改即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .switch {
  10.             position: relative;
  11.             display: inline-block;
  12.             width: 108px;
  13.             height: 34px;
  14.         }
  16.         .switch input {
  17.             opacity: 0;
  18.             width: 0;
  19.             height: 0;
  20.         }
  22.         .slider {
  23.             position: absolute;
  24.             cursor: pointer;
  25.             top: 0;
  26.             left: 0;
  27.             right: 0;
  28.             bottom: 0;
  29.             /* background: #F1F4F5; */
  30.             background: #eee;
  32.             border-radius: 8rpx 8rpx 8rpx 8rpx;
  34.             -webkit-transition: .4s;
  35.             transition: .4s;
  36.         }
  38.         .slider:before {
  39.             position: absolute;
  40.             content: "";
  41.             /* content: "未读"; */
  42.             height: 26px;
  43.             width: 46px;
  44.             left: 4px;
  45.             text-align: center;
  46.             line-height: 26px;
  47.             /* color: #5EC6A7; */
  48.             bottom: 4px;
  49.             background-color: white;
  50.             border-radius: 8rpx 8rpx 8rpx 8rpx;
  51.             -webkit-transition: .4s;
  52.             transition: .4s;
  53.         }
  55.         /* 如果选中的状态下有背景颜色，边框，阴影这些变化可以使用下面的样式 */
  56.         /* input:checked+.slider {
  57.             background-color: #2196F3;
  58.         }
  60.         input:focus+.slider {
  61.             box-shadow: 0 0 1px #2196F3;
  62.         } */
  66.         /* 
  67.             动画切换效果,就是那个伪类块块的滑动动画
  69.             input:checked 的意思是当input标签选中的时候，具体用的时候可以多加一点限制，
  70.             或者直接用一个具体的样式限制，比如可以修改为.switch_input:checked+.slider:before
  72.             +.slider 的意思就是选中input标签的相邻的兄弟节点
  74.             .slider:before 这里就是样式slider后面的伪类选择器
  75.          */
  76.         input:checked+.slider:before {
  77.             -webkit-transform: translateX(53px);
  78.             -ms-transform: translateX(53px);
  79.             transform: translateX(53px);
  80.         }
  83.         /* 
  84.            选中状态下 左边的文字位置与样式 
  85.            这里样式的意思就是input选中的时候找到它相邻的兄弟节点slider，然后找到slider的后代元素lefTag
  86.         */
  87.         input:checked+.slider .lefTag {
  88.             color: #313960;
  89.         }
  91.           /* 选中状态下 右边的文字位置与样式 */
  92.         input:checked+.slider .rightTag {
  93.             color: #5EC6A7;
  94.         }
  96.         /* 默认状态下左边的文字位置与样式 */
  97.         .lefTag {
  98.             position: absolute;
  99.             left: 12px;
  100.             top: 7px;
  101.             font-size: 15px;
  102.             color: #5EC6A7;
  103.         }
  105.         /* 默认状态下右边的文字位置与样式 */
  106.         .rightTag {
  107.             position: absolute;
  108.             right: 13px;
  109.             top: 7px;
  110.             font-size: 15px;
  111.             color: #313960;
  112.         }
  113.     </style>
  114. </head>
  116. <body>
  117.     <label class="switch">
  118.         <input type="checkbox" class="switch_input" hidden>
  119.         <div class="slider round">
  120.             <div class="lefTag">未读</div>
  121.             <div class="rightTag">全部</div>
  122.         </div>
  123.     </label>
  124. </body>
  126. </html>

用于uni-app开发编译到微信小程序开发工具运行的

用于uni-app开发使用npm run dev:mp-weixin编译到微信小程序开发工具运行调试的,开发工具是用的是vscode

效果图如下：

如果直接把上面的代码和样式用于小程序中是运行不起的，input type="checkbox"这个在微信小程序中没有效果的，所以改变了一下实现思路，直接都用view来实现，然后是否选中的状态用点击事件和vue的数据绑定来实现，还有一点就是那个移动滑块的实现从伪类换成了view。

代码如下，样式像素单位是px版本

具体关键代码的实现注释即可

  1. <template>
  2.     <view class="message-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ state.title }}</view>
  5.             <view>
  6.                 <view class="switch" @tap="swichChoise">
  7.                     <view class="switch_input" hidden />
  8.                     <!-- 这里当属性state.isChoise为true的时候就会多一个选中状态下的样式sliderRun -->
  9.                     <view class="slider round" :class="{ sliderRun: state.isChoise }">
  10.                         <view class="lefTag">未读</view>
  11.                         <view class="rightTag">全部</view>
  12.                         <view class="swtichTag"></view>
  13.                     </view>
  14.                 </view>
  15.             </view>
  16.         </view>
  17.         <view class="splitline"></view>
  18.     </view>
  19. </template>
  21. <script setup lang="ts" name="tasks">
  23. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  25. const state = reactive({
  26.     title: '消息通知',
  27.     isChoise: false,
  28. })
  31. onMounted(() => {
  32. })
  34. // 切换选中状态
  35. const swichChoise = () => {
  36.     state.isChoise = !state.isChoise
  37. }
  39. </script>
  41. <style scoped="scoped" lang="scss">
  42. .message-container {
  43.     padding: 15px;
  45.     .titleWrap {
  46.         display: flex;
  47.         justify-content: space-between;
  48.         align-items: center;
  50.         .title {
  51.             font-family: PingFang SC, PingFang SC;
  52.             font-weight: 400;
  53.             font-size: 30rpx;
  54.             color: #313960;
  55.         }
  56.     }
  58.     .splitline {
  59.         margin-left: -20rpx;
  60.         margin-right: -20rpx;
  61.         margin-top: 30rpx;
  62.         height: 1rpx;
  63.         background: #f3f3f3;
  64.     }
  65. }
  66. </style>
  68. <!-- 滑块开关按钮的样式 -->
  69. <style scoped="scoped" lang="scss">
  70. .switch {
  71.     position: relative;
  72.     display: inline-block;
  73.     width: 108px;
  74.     height: 34px;
  75. }
  77. .switch input {
  78.     opacity: 0;
  79.     width: 0;
  80.     height: 0;
  81. }
  83. .slider {
  84.     position: absolute;
  85.     top: 0;
  86.     left: 0;
  87.     right: 0;
  88.     bottom: 0;
  89.     background: #F1F4F5;
  91.     border-radius: 8rpx 8rpx 8rpx 8rpx;
  93.     -webkit-transition: .4s;
  94.     transition: .4s;
  95. }
  97. .swtichTag {
  98.     position: absolute;
  99.     height: 26px;
  100.     width: 46px;
  101.     left: 4px;
  102.     text-align: center;
  103.     line-height: 26px;
  104.     bottom: 4px;
  105.     background-color: white;
  106.     border-radius: 8rpx 8rpx 8rpx 8rpx;
  107.     -webkit-transition: .4s;
  108.     transition: .4s;
  109. }
  112. .sliderRun {
  114.     // 选中状态下滑块往右边移动
  115.     .swtichTag {
  116.         -webkit-transform: translateX(53px);
  117.         -ms-transform: translateX(53px);
  118.         transform: translateX(53px);
  119.     }
  121.     /* 选中状态下 左边的文字位置与样式 */
  122.     .lefTag {
  123.         color: #313960;
  124.     }
  126.     /* 选中状态下 右边的文字位置与样式 */
  127.     .rightTag {
  128.         color: #5EC6A7;
  129.     }
  130. }
  132. /* 默认状态下左边的文字位置与样式 */
  133. .lefTag {
  134.     position: absolute;
  135.     left: 12px;
  136.     top: 7px;
  137.     font-size: 15px;
  138.     color: #5EC6A7;
  139.     z-index: 999;
  140. }
  142. /* 默认状态下右边的文字位置与样式 */
  143. .rightTag {
  144.     position: absolute;
  145.     right: 13px;
  146.     top: 7px;
  147.     font-size: 15px;
  148.     color: #313960;
  149.     z-index: 999;
  150. }
  151. </style>

样式像素单位是rpx版本

如果是运行到微信小程序的，最好像素单位还是使用rpx

  1. <template>
  2.     <view class="message-container">
  3.         <view class="titleWrap">
  4.             <view class="title">{{ state.title }}</view>
  5.             <view>
  6.                 <view class="switch" @tap="swichChoise">
  7.                     <view class="switch_input" hidden />
  8.                     <!-- 这里当属性state.isChoise为true的时候就会多一个选中状态下的样式sliderRun -->
  9.                     <view class="slider round" :class="{ sliderRun: state.isChoise }">
  10.                         <view class="lefTag">未读</view>
  11.                         <view class="rightTag">全部</view>
  12.                         <view class="swtichTag"></view>
  13.                     </view>
  14.                 </view>
  15.             </view>
  16.         </view>
  17.         <view class="splitline"></view>
  18.     </view>
  19. </template>
  21. <script setup lang="ts" name="tasks">
  23. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  25. const state = reactive({
  26.     title: '消息通知',
  27.     isChoise: false,
  28. })
  31. onMounted(() => {
  32. })
  34. // 切换选中状态
  35. const swichChoise = () => {
  36.     state.isChoise = !state.isChoise
  37. }
  39. </script>
  41. <style scoped="scoped" lang="scss">
  42. .message-container {
  43.     padding: 30rpx 20rpx 10rpx 20rpx;
  45.     .titleWrap {
  46.         display: flex;
  47.         justify-content: space-between;
  48.         align-items: center;
  50.         .title {
  51.             font-family: PingFang SC, PingFang SC;
  52.             font-weight: 400;
  53.             font-size: 30rpx;
  54.             color: #313960;
  55.         }
  56.     }
  58.     .splitline {
  59.         margin-left: -20rpx;
  60.         margin-right: -20rpx;
  61.         margin-top: 30rpx;
  62.         height: 1rpx;
  63.         background: #f3f3f3;
  64.     }
  65. }
  66. </style>
  69. <!-- 滑块开关按钮的样式 -->
  70. <style scoped="scoped" lang="scss">
  71. .switch {
  72.     position: relative;
  73.     display: inline-block;
  74.     width: 216rpx;
  75.     height: 68rpx;
  76. }
  78. .switch input {
  79.     opacity: 0;
  80.     width: 0;
  81.     height: 0;
  82. }
  84. .slider {
  85.     position: absolute;
  86.     top: 0;
  87.     left: 0;
  88.     right: 0;
  89.     bottom: 0;
  90.     background: #F1F4F5;
  91.     border-radius: 8rpx 8rpx 8rpx 8rpx;
  92.     -webkit-transition: .4s;
  93.     transition: .4s;
  94. }
  96. .swtichTag {
  97.     position: absolute;
  98.     height: 52rpx;
  99.     width: 92rpx;
  100.     left: 8rpx;
  101.     text-align: center;
  102.     line-height: 52rpx;
  103.     bottom: 8rpx;
  104.     background-color: white;
  105.     border-radius: 8rpx 8rpx 8rpx 8rpx;
  106.     -webkit-transition: .4s;
  107.     transition: .4s;
  108. }
  110. .sliderRun {
  112.     // 选中状态下滑块往右边移动
  113.     .swtichTag {
  114.         -webkit-transform: translateX(108rpx);
  115.         -ms-transform: translateX(108rpx);
  116.         transform: translateX(108rpx);
  117.     }
  119.     /* 选中状态下 左边的文字位置与样式 */
  120.     .lefTag {
  121.         color: #313960;
  122.     }
  124.     /* 选中状态下 右边的文字位置与样式 */
  125.     .rightTag {
  126.         color: #5EC6A7;
  127.     }
  128. }
  130. /* 默认状态下左边的文字位置与样式 */
  131. .lefTag {
  132.     position: absolute;
  133.     left: 24rpx;
  134.     top: 12rpx;
  135.     font-size: 30rpx;
  136.     color: #5EC6A7;
  137.     z-index: 999;
  138. }
  140. /* 默认状态下右边的文字位置与样式 */
  141. .rightTag {
  142.     position: absolute;
  143.     right: 26rpx;
  144.     top: 12rpx;
  145.     font-size: 30rpx;
  146.     color: #313960;
  147.     z-index: 999;
  148. }
  149. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

css图片和文字对齐问题
文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐，如下图 但是如果修改下html结...

css实现简单矩形对话框
在前端做项目时，我们可能会遇到写对话框的需求，这次做视频会议页面就遇到了，记录下日后有个参照。//网页部分 &lt;divcla...

如何修改css中存在的element.style内联样式
改腾讯地图的时候调整了下样式，发现样式一直存在问题，修改style里面的值，一点用都没有，html中这个值还找不到是在哪里出...

珍藏！！ JS css不传之秘集合
&lt;!--其中5指每隔5秒刷新一次页面--&gt; &lt;metahttp-equiv=&quot;refresh&quot;content=&quot;5&quot;&gt; =========...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

DIV+css网页布局常用的一些基础知识整理
一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print...

css相对定位与绝对定位
一般相对定位和绝对定位可以配合起来使用 例如实现如下的效果 只需要在外层div设置为相对定位，在内部设置为绝对定位就...

修改了css后，让浏览器从缓存中更新
当我们修改了css后，如果不做一些操作，浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...

css定位的简单运用
父容器使用相对定位position: relative子容器使用绝对定位position: relative这样就可以子容器相对父容器定位了，可以写一...

jscss异步加载
有些时候为了效率，我们需要js与css能够异步加载方法1：直接在后面加一个async的关键字&lt;scriptsrc=&quot;~/lib/jquery/d...

css3样式学习代码
上代码！上代码！不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

css实现动画效果案列:冒泡案列
css实现动画效果案列:冒泡案列效果图:代码:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;...

html/css样式
代码： &lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;title&gt...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

使用jquery操作元素的css样式（获取、修改等等）
使用jquery操作元素的css样式（获取、修改等等） //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...