微信小程序分享11: label标签

label

标签组件在weui中被用在了很多地方，主要用于为另一个组件提供说明性的文本。在小程序中，只有一个for属性，指示另一个组件的id。

index.wxml:

label将组件们圈住，label本身相当于是一个空的block，此时label标签内部的第一个选择组件checkbox被label选中，text用于提供显示的文本。当单击文本时，checkbox同步选中与不选中的状态。

如果选择性控件不放在label内部，则需要使用for属性，设置为它所服务组件的id：

for属性与radio的id属性是同一个值。

运行效果：

前面的radio，checkbox可以使用hidden属性隐藏，以上都是自定义样式实现的复选、单选组件。是通过两个色块实现的：

第一组中，label-1__icon是背景，大小是18，label-1__icon--checked是选中之后的方块UI，上左有3px的偏离，宽高是12px，合起来正好是18px。

以前学习icon时，小程序框架自带这样一个icon:

练习：最后那个应该是success_no_circle，动手将它写在wxss中，使复选框选中时有一个对号的图标。

代码：

<icon type="success_no_circle" color="green" size="12" style="padding:3px;display:{{item.checked ? 'block' : 'none'}}" />

运行效果是这样的：

效果还不错！

文档中说，label可以绑定的控件有<button/>, <checkbox/>, <radio/>, <switch/>四种，但是button并不好用。

这样的代码运行没有效果：