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并不好用。
这样的代码运行没有效果: