脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序switch组件

微信小程序switch组件使用详解

 更新时间：2018年01月31日 08:41:00   作者：Rattenking  
这篇文章主要为大家详细介绍了微信小程序switch组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序switch组件的实现代码，供大家参考，具体内容如下

效果图

switch组件实现

HTML

<div class="switch-list">
 <span class="fui-fr">红色switch组件</span>
 <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">绿色switch组件</span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">绿色禁用switch组件</span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked disabled>
</div>
<div class="switch-list">
 <span class="fui-fr">蓝色switch组件---开</span> 
 <input class="fui-switch" style="color:blue" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">蓝色switch组件---关</span> 
 <input class="fui-switch" style="color:blue" type="checkbox">
</div>

CSS

.switch-list{
 padding: .5rem;
}
.fui-switch{
 position: relative;
 width: .87rem;
 height: .5rem;
 z-index: 10;
 display: inline-block;
 outline: medium;
 border: 1px solid #dfdfdf;
 border-radius: .25rem;
 background-color: #dfdfdf;
 -webkit-appearance: none;
 -moz-appearance: none;
 vertical-align: middle;
}
.fui-switch:checked{
 border-color: currentColor;
 background-color: currentColor;
}
.fui-switch::after,.fui-switch::before{
 content: "";
 position: absolute;
 height: .44rem;
 top: 0;
 left: 0;
 border-radius: .25rem;
 -webkit-transition: -webkit-transform .3s;
 transition: -webkit-transform .3s;
 transition: transform .3s;
 transition: transform .3s,-webkit-transform .3s;
}
.fui-switch:before {
 width: .84rem;
 background-color: #fdfdfd;
}
.fui-switch:checked:before {
 -webkit-transform: scale(0);
 transform: scale(0);
}
.fui-switch:after {
 width: .44rem;
 background-color: #fff;
 box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fui-switch:checked:after {
 -webkit-transform: translateX(.4rem);
 transform: translateX(.4rem);
}
.fui-switch[disabled] {
 opacity: .5;
}
.fui-fr{font-size: .3rem;vertical-align: middle;}

实现rem的JS

(function(win,factory){
 factory(win);
 window.addEventListener('resize',function(){factory(win)},false);
}(window,function(win){
 var width = document.documentElement.clientWidth;
 width = width > 750 ? 750 : width;
 document.documentElement.style.fontSize = width / 7.5 + 'px';
}));

注意

此处 1rem 在 750 的 psd 设计图代表 100px ；
switch 的切换动画是通过 CSS3 的 transition 属性实现；
主要是控制 switch 的 after 的移动，以及 before 的放大缩小动画。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 获取JAVASCRIPT时间戳函数的5种方法

    获取JAVASCRIPT时间戳函数的5种方法

    JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,JavaScript处理时间主要使用时间对象Date,本文对js时间戳函数获取方法给大家介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • 微信小程序block的使用教程

    微信小程序block的使用教程

    这篇文章主要介绍了微信小程序block的使用 ,微信小程序最近非常火热，实现起来也很简单，只要block就可以实现，需要的朋友可以参考下
    2018-04-04
  • javascript与CSS复习(三)

    javascript与CSS复习(三)

    呵呵，又弄成了三部曲，这是最后一部分，关于鼠标和浏览器本身显示上的一些属性。
    2010-06-06
  • js实现简单拼图小游戏

    js实现简单拼图小游戏

    这篇文章主要为大家详细介绍了js实现简单拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript复制文案到剪贴板小技巧

    JavaScript复制文案到剪贴板小技巧

    这篇文章主要为大家介绍了JavaScript复制文案到剪贴板实现小技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 浅析JS给原始数据类型加属性和方法为什么不报错

    浅析JS给原始数据类型加属性和方法为什么不报错

    这篇文章主要想和大家一起探讨一下JavaScript中给原始数据类型添加属性和方法为什么不报错,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2023-11-11
  • 使用js实现一个可编辑的select下拉列表

    使用js实现一个可编辑的select下拉列表

    这篇文章主要介绍了使用js实现一个可编辑的select下拉列表，个人感觉还不错,需要的朋友可以参考下
    2014-02-02
  • JavaScript中输出</script>标签的方法

    JavaScript中输出</script>标签的方法

    这篇文章主要介绍了JavaScript中输出</script>标签的方法,在一些广告代码中经常会用到这个小技巧,需要的朋友可以参考下
    2014-08-08
  • JavaScript模拟实现新浪下拉菜单效果

    JavaScript模拟实现新浪下拉菜单效果

    这篇文章主要为大家介绍了如何通过JavaScript模拟实现新浪的下拉菜单效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试
    2022-03-03
  • 通过复制Table生成word和excel的javascript代码

    通过复制Table生成word和excel的javascript代码

    通过复制Table生成word和excel，个人感觉这个功能还是比较实用的，下面有个不错的示例，希望对大家有所帮助
    2014-01-01

最新评论