未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例为大家分享了微信小程序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 的放大缩小动画。

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


您可能感兴趣的文章:微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】微信小程序 switch组件详解及简单实例微信小程序(二十一)switch组件详细介绍微信小程序switch开关选择器使用详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信CSSCSS3HTML数据
tags: switch,gt,lt,fui,class,span,div,color,transform,width,checked,webkit,组件,style,fr
分页:12
转载请注明
本文标题:微信小程序switch组件使用详解
本站链接:http://www.codesec.net/view/572264.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)