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

前端之家收集整理的这篇文章主要介绍了微信小程序switch组件使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果

switch组件实现

HTML

Box">

CSS

Box-shadow: 0 1px 3px rgba(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

750 ? 750 : width; document.documentElement.style.fontSize = width / 7.5 + 'px'; }));

注意

此处 1rem 在 750 的 psd 设计图代表 100px ; switch 的切换动画是通过 CSS3 的 transition 属性实现; 主要是控制 switch 的 after 的移动,以及 before 的放大缩小动画。

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

猜你在找的微信小程序相关文章