微信小程序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 相关文章推荐
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
SONY ICF-F10中波修复记
2021/03/02 无线电
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
Python比较2个时间大小的实现方法
2018/04/10 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Java如何格式化日期
2012/08/07 面试题
会计电算化专业毕业生推荐信
2013/12/24 职场文书
运动会加油口号
2014/06/07 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
计划生育证明书写要求
2014/09/17 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
工程催款通知书
2015/04/17 职场文书
运动会宣传语
2015/07/13 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Kubernetes控制节点的部署
2022/04/01 Servers
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript