微信小程序 label 组件详解及简单实例

微信小程序 label 组件详解及简单实例

微信小程序label

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

用来改进表单组件的可用性，使用for属性找到对应的iCaEpOENVd，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：button, checkbox, radio, switch。

属性名

类型

说明

for

String

绑定控件的id

示例代码：

表单组件在label内

{{item.value}}

label用for标识表单组件

{{item.name}}

绑定button

点击这段文字，button会被选中

按钮

label内有多个时选中第一个

选中我

选不中

选不中

选不中

点我会选中第一个

Page({

data: {

checkboxItems: [

{name: 'USA', value: '美国'},

{name: 'CHN', value: '中国', checked: 'true'},

{name: 'BRA', value: '巴西'},

{name: 'JPN', value: '日本', checked: 'true'},

{name: 'ENG', value: '英国'},

{name: 'TUR', value: '法国'},

],

radioItems: [

{name: 'USA', value: '美国'},

{name: 'CHN', value: '中国', checked: 'true'},

{name: 'BRA', value: '巴西'},

{name: 'JPN', value: '日本'},

{name: 'ENG', value: '英国'},

{name: 'TUR', 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[i].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[i].name) !== -1) {

changed['radioItems['+i+'].checked'] = true

} else {

changed['radioItems['+i+'].checked'] = false

}

}

this.setData(changed)

}

})

.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: #fcfff4;

}

.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: #fcfff4;

border-radius: 50px;

}

.label-2__icon-checked {

position: absolute;

left: 3px;

top: 3px;

width: 12px;

height: 12px;

background: #1aad19;

border-radius: 50%;

}

.label-4_text{

text-align: center;

margin-top: 15px;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。