Comment utiliser le composant Switch dans le mini-programme WeChat

Cet article présente principalement en détail la méthode d'implémentation du composant switch de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec vous l'applet WeChat. composant switch. Le code d'implémentation du composant switch du programme est pour votre référence. Le contenu spécifique est le suivant

Rendu

. HTML

<p class="switch-list">
 <span class="fui-fr">红色switch组件</span>
 <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox" checked>
</p>
<p class="switch-list">
 <span class="fui-fr">绿色switch组件</span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked>
</p>
<p class="switch-list">
 <span class="fui-fr">绿色禁用switch组件</span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked disabled>
</p>
<p class="switch-list">
 <span class="fui-fr">蓝色switch组件---开</span> 
 <input class="fui-switch" style="color:blue" type="checkbox" checked>
</p>
<p class="switch-list">
 <span class="fui-fr">蓝色switch组件---关</span> 
 <input class="fui-switch" style="color:blue" type="checkbox">
</p>

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;}

JS pour implémenter rem

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

Remarque

Ici 1rem représente 100px dans la conception psd de 750 ;
L'animation de commutation du commutateur est réalisée via l'attribut de transition de CSS3
Il contrôle principalement le mouvement de l'après du commutateur et l'animation de zoom avant et arrière ;

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter un délai DIV de quelques secondes avant de disparaître ou de s'afficher dans JS/jQuery

Utiliser du js natif pour mettre en œuvre un lien à trois niveaux entre les provinces et les municipalités

Utiliser les bases de vue pour créer, ajouter, supprimer, modifier et vérifier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!