如何在微信小程序中使用switch组件

如何在微信小程序中使用switch组件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

HTML

<div class="switch-list">  <span class="fui-fr">红色switch组件</span>  <input class="fui-switch"  type="checkbox" checked> </div> <div class="switch-list">  <span class="fui-fr">绿色switch组件</span>  <input class="fui-switch"  type="checkbox" checked> </div> <div class="switch-list">  <span class="fui-fr">绿色禁用switch组件</span>  <input class="fui-switch"  type="checkbox" checked disabled> </div> <div class="switch-list">  <span class="fui-fr">蓝色switch组件---开</span>   <input class="fui-switch"  type="checkbox" checked> </div> <div class="switch-list">  <span class="fui-fr">蓝色switch组件---关</span>   <input class="fui-switch"  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'; }));

关于如何在微信小程序中使用switch组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。