微信小程序开发之checkbox以及js数据配置和事件处理



视频教程:http://v.youku.com/v_show/id_XMTczNzk2Mjk4MA==.html?from=s1.8-1-1.2&spm=0.0.0.0.UkDru7

checkbox

 <checkbox-group>
      <checkbox  value="key1" checked="true"/>value1
      <checkbox  value="key2" checked="false"/>value2
      <checkbox  value="key3" checked="true"/>value3
  </checkbox-group>


事件分发和处理

上例中有3个checkbox,在实际项目中,你肯定会选择或者取消选择其中的checkbox,那么你如何获取你选择到的checkbox的数据呢?这就涉及到了事件的分发和处理。

微信小程序中,事件的分发系统已经帮我们做好了,我们只需要在checkbox-group配置bindchange="checkchange",那么事件就会分发大对应的***.js中的checkchange()方法处理,如下:

***.wxml

 <checkbox-group bindchange="<span style="font-family: Arial, Helvetica, sans-serif;">checkboxChange</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span>
      <checkbox  value="key1" checked="true"/>value1
      <checkbox  value="key2" checked="false"/>value2
      <checkbox  value="key3" checked="true"/>value3
  </checkbox-group>
这里checkboxChange是自定义的名字,只要跟下面js的checkboxChange是一模一样就可以。

***.js

Page({
  checkboxChange: function(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  },

})
如此,你每次选择,或者取消选择checkbox,都会触发checkboxChange方法,然后打印出来所有选择的数据(即e.detail.value)到控制台。


数据的配置

在上面的***.js的Page({})中,处理可以定义事件的处理方法,还可以配置数据。配置数据严格要求以data标签开头,如下

Page({
  data: {
    key1:"key1",
    value1: 'value1',
    key2:"key2",
    value2:"value2"
  },

  checkboxChange: function(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  },

})
如果我们的数据在***.js中的data里面配置了,那么我们可以这么修改***.wxml中的checkbox标签里的数据:

  <checkbox-group bindchange="checkboxChange">
      <checkbox  value="{{key1}}" checked="true"/>{{value1}}
      <checkbox  value="{{key2}}" checked="false"/>{{value2}}
      <checkbox  value="key3" checked="true"/>value3
  </checkbox-group>
用{{}}把data中对应的数据包起来,也可以得到一样的效果。


但是一般这种情况下,我们会考虑把数据设置为数组的形式,并在标签中循环加载出来。

data配置数组:

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国'},
      {name: 'BRA', value: '巴西'},
    ]
  },

  checkboxChange: function(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  },

})
这里请注意,我把key和value稍微做了修改,对应的***.wxml也要修改。

  <checkbox-group bindchange="checkboxChange">
    <block class="checkbox" wx:for="{{items}}">
      <checkbox  value="{{item.name}}"/>{{item.value}}
    </block>
  </checkbox-group>
这里我用了block来做循环,官方用的label标签,这都是辅助标签,不表示任何意义哈。
***.js的items对应了***.wxml的items。每一组元素以item.的形式取出。








视频教程:http://v.youku.com/v_show/id_XMTczNzk2Mjk4MA==.html?from=s1.8-1-1.2&spm=0.0.0.0.UkDru7

checkbox

 <checkbox-group>
      <checkbox  value="key1" checked="true"/>value1
      <checkbox  value="key2" checked="false"/>value2
      <checkbox  value="key3" checked="true"/>value3
  </checkbox-group>


事件

上例中有3个checkbox,在实际项目中,你肯定会选择或者取消选择其中的checkbox,那么你如何获取你选择到的checkbox的数据呢?这就涉及到了事件的分发和处理。

微信小程序中,事件的分发系统已经帮我们做好了,我们只需要在checkbox-group配置bindchange="checkchange",那么事件就会分发大对应的***.js中的checkchange()方法处理,如下:

***.wxml

 <checkbox-group bindchange="<span style="font-family: Arial, Helvetica, sans-serif;">checkboxChange</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span>
      <checkbox  value="key1" checked="true"/>value1
      <checkbox  value="key2" checked="false"/>value2
      <checkbox  value="key3" checked="true"/>value3
  </checkbox-group>
这里checkboxChange是自定义的名字,只要跟下面js的checkboxChange是一模一样就可以。

***.js

Page({
  checkboxChange: function(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  },

})
如此,你每次选择,或者取消选择checkbox,都会触发checkboxChange方法,然后打印出来所有选择的数据(即e.detail.value)到控制台。



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页