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

标签:游戏玩法    日期:2017-10-10 09:30    录入:汇盛国际平台    浏览:

  

[微信小程序label,微信小程序label,组件详解,微信小程序label,怎么用]微信小程序 label 组件详解及简单实例

  

微信小程序label   

  

相关文章:  

  

微信小程序 Button   

  

微信小程序 radio   

  

微信小程序 slider   

  

微信小程序 switch  

  

微信小程序 textarea  

  

微信小程序 picker-view   

  

微信小程序 picker   

  

微信小程序 label   

  

微信小程序 input  
  
  

  

微信小程序 form   

  

微信小程序 checkbox  
  
  

  

实现效果图:  

  

label  

  

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

  

  

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

  

  

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

  

                                
属性名类型说明
forString绑定控件的id
  

示例代码:  

  
  
    表单组件在label内                label用for标识表单组件                        绑定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)  }  })
 
★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
        
上一篇:老听人说微信运营要人格化到底是什么鬼
下一篇:没有了