Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie die Switch-Komponente im WeChat-Miniprogramm

亚连
Freigeben: 2018-06-08 17:33:48
Original
3974 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierungsmethode der Switch-Komponente des WeChat-Applets ausführlich vorgestellt. Sie hat einen gewissen Referenzwert.

Das Beispiel in diesem Artikel teilt Ihnen das WeChat-Applet mit Switch-Komponente. Der Implementierungscode der Programm-Switch-Komponente ist wie folgt:

Rendering

So verwenden Sie die Switch-Komponente im WeChat-Miniprogramm

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>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

JS, das rem implementiert

(function(win,factory){
 factory(win);
 window.addEventListener(&#39;resize&#39;,function(){factory(win)},false);
}(window,function(win){
 var width = document.documentElement.clientWidth;
 width = width > 750 ? 750 : width;
 document.documentElement.style.fontSize = width / 7.5 + &#39;px&#39;;
}));
Nach dem Login kopieren

Hinweis

Hier stellt 1rem im 750-PSD-Design 100 Pixel dar;
Schalter Die Umschaltanimation wird über das Übergangsattribut von CSS3 implementiert.
steuert hauptsächlich die Bewegung des Nachhers des Schalters und die Vergrößerungs- und Verkleinerungsanimation des Vorhers.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine DIV-Verzögerung für einige Sekunden, bevor sie in JS/jQuery verschwindet oder angezeigt wird

Verwenden Sie natives js Implementierung einer dreistufigen Verknüpfung zwischen Provinzen und Gemeinden

Verwendung von Vue-Grundlagen zum Erstellen, Hinzufügen, Löschen, Ändern und Überprüfen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Switch-Komponente im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage