Detaillierte Erläuterung der WeChat-Applet-Komponenten: Label-Label-Mini-Programmentwicklung-php.cn

Label-Tag Komponentenbeschreibung:

Label-Tag ist dem HTML-Label sehr ähnlich. Das Label-Element bietet dem Benutzer keine besonderen Effekte. Es verbessert jedoch die Benutzerfreundlichkeit für Mausbenutzer. Dieses Steuerelement wird ausgelöst, wenn Sie auf den Text innerhalb des Beschriftungselements klicken. Das heißt, wenn der Benutzer das Etikett auswählt, wird der Fokus automatisch auf das an das Etikett gebundene Formularsteuerelement gelegt, das hauptsächlich zur Verbesserung der Benutzerfreundlichkeit der Formularkomponente verwendet wird. Verwenden Sie das for-Attribut, um die entsprechende ID zu finden, oder platzieren Sie das Steuerelement unter der Beschriftung. Wenn Sie darauf klicken, wird das entsprechende Steuerelement ausgelöst. Für hat eine höhere Priorität als interne Kontrollen. Wenn mehrere Kontrollen vorhanden sind, wird standardmäßig die erste Kontrolle ausgelöst. Die Steuerelemente, die derzeit gebunden werden können, sind: , , , label

Komponente Der Beispielcode läuft wie folgt:

Das Folgende ist der WXML-Code:

Das Folgende ist der JS-Code:

[/p][color=rgb(51, 51, 51)][font="][size=13px] -------label绑定checkbox(内嵌)------- {{item.value}} ---------label绑定radio(for)--------- {{item.name}} -----------label绑定button----------- label绑定button(for) Fly-1 label绑定button(内嵌) Fly-2 -----------label绑定switch----------- label绑定switch( for) label绑定switch(内嵌) label绑定switch(内嵌) Nach dem Login kopieren

Das Folgende ist der WXSS-Code:

Page({ data: { checkboxItems: [ {name: 'ctrip', value: '携程', checked: 'true'}, {name: 'qunar', value: '去哪儿'}, {name: 'tuniu', value: '途牛'} ], radioItems: [ {name: 'ctrip', value: '携程'}, {name: 'qunar', value: '去哪儿', checked: 'true'}, {name: 'tuniu', value: '途牛'} ], hidden: false }, checkboxChange: function(e) { var checked = e.detail.value var changed = {} for (var i = 0; i < this.data.checkboxItems.length; i ++) { if (checked.indexOf(this.data.checkboxItems.name) !== -1) { changed['checkboxItems['+i+'].checked'] = true } else { changed['checkboxItems['+i+'].checked'] = false } } this.setData(changed) }, radioChange: function(e) { var checked = e.detail.value var changed = {} for (var i = 0; i < this.data.radioItems.length; i ++) { if (checked.indexOf(this.data.radioItems.name) !== -1) { changed['radioItems['+i+'].checked'] = true } else { changed['radioItems['+i+'].checked'] = false } } this.setData(changed) }, testLabelBindButton_1:function(){ console.log("奔走相告，button通过for可以绑定成功啦！！！"); }, testLabelBindButton_2:function(){ console.log("奔走相告，button通过内嵌可以绑定成功啦！！！"); } }) Nach dem Login kopieren

Hauptattribute:

Attribut Typ

Typ .label-1, .label-2{ margin-bottom: 15px; } .label-1__text, .label-2__text { display: inline-block; vertical-align: middle; } .label-1__icon { position: relative; margin-right: 10px; display: inline-block; vertical-align: middle; width: 18px; height: 18px; background: #CAE1FF; } .label-1__icon-checked { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #1aad19; } .label-2__icon { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; width: 18px; height: 18px; background: #CAFF70; border-radius: 50px; } .label-2__icon-checked { position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: #1aad19; border-radius: 50%; } .section__title{ display: block; text-align: center; color: #9400D3; } .content{ padding-bottom: 15px; } Nach dem Login kopieren für String Die ID des gebundenen Steuerelements (die ID wird nur wirksam, wenn sie genau mit der ID des Formularsteuerelements übereinstimmt, das gebunden werden muss)

Detaillierte Erläuterung der WeChat-Applet-Komponenten: Label-Label

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen