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


Posted in Javascript onJanuary 31, 2018

本文实例为大家分享了微信小程序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 相关文章推荐
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
Vue如何引入远程JS文件
Apr 20 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue项目中导入swiper插件的方法
Jan 30 #Javascript
微信小程序实现手势图案锁屏功能
Jan 30 #Javascript
简单理解Vue中的nextTick方法
Jan 30 #Javascript
Vue组件中slot的用法
Jan 30 #Javascript
vue初尝试--项目结构(推荐)
Jan 30 #Javascript
JS实现的邮箱提示补全效果示例
Jan 30 #Javascript
JS实现的抛物线运动效果示例
Jan 30 #Javascript
You might like
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
python flask中静态文件的管理方法
2018/03/20 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
学前教育教师求职自荐信
2013/09/22 职场文书
公证书样本
2014/04/10 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
交通处罚决定书
2015/06/24 职场文书
护理工作心得体会
2016/01/22 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python
解决redis批量删除key值的问题
2022/03/23 Redis
Python如何将list中的string转换为int
2022/07/15 Ruby