WeChat applet switch component usage details, switch Usage Details

Usage of the switch component of the Applet

The example in this article shares the implementation code of the switch component of the applet for your reference. The specific content is as follows:

HTML

<Div class = "switch-list"> <span class = "fui-fr"> red switch component </span> <input class = "fui-switch" style = "color: rgb (255, 0, 0 ); "type =" checkbox "checked> </div> <div class =" switch-list "> <span class =" fui-fr "> green switch component </span> <input class = "fui-switch" style = "color: rgb (1, 76,216,100 ); "type =" checkbox "checked> </div> <div class =" switch-list "> <span class =" fui-fr "> disable the switch component in green </span> <input class = "fui-switch" style = "color: rgb (1, 76,216,100 ); "type =" checkbox "checked disabled> </div> <div class =" switch-list "> <span class =" fui-fr "> Blue switch component --- Open </ span> <input class = "fui-switch" style = "color: blue "type =" checkbox "checked> </div> <div class =" switch-list "> <span class =" fui-fr "> blue switch component --- off </ 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;}

Implement 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';}));

Note:

Here the psd design of 1rem in 750 represents 100px;
The switch switching animation is implemented through the transition attribute of CSS3;
It mainly controls the movement of the switch after and the before zoom-in and zoom-out animation.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.