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

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

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

效果图

HTML

红色switch组件

绿色switch组件

绿色禁用switch组件

蓝色switch组件---开

蓝色switch组件---关

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 的放大缩小动画。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。