博客列表 >微信小程序官方组件展示之表单组件checkbox源码

微信小程序官方组件展示之表单组件checkbox源码

软件事业部
软件事业部原创
2022年08月23日 12:57:45490浏览

以下将展示微信小程序之表单组件checkbox源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
功能描述:
多选项目。
属性说明:

示例代码:
JAVASCRIPT:

  1. Page({
  2. onShareAppMessage() {
  3. return {
  4. title: 'checkbox',
  5. path: 'page/component/pages/checkbox/checkbox'
  6. }
  7. },
  8. data: {
  9. items: [
  10. {value: 'CHN', name: '中国', checked: 'true'},
  11. {value: 'BRA', name: '巴西'},
  12. {value: 'ENG', name: '英国'},
  13. {value: 'FRA', name: '法国'}
  14. ]
  15. },
  16. checkboxChange(e) {
  17. console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  18. const items = this.data.items
  19. const values = e.detail.value
  20. for (let i = 0, lenI = items.length; i < lenI; ++i) {
  21. items[i].checked = false
  22. for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
  23. if (items[i].value === values[j]) {
  24. items[i].checked = true
  25. break
  26. }
  27. }
  28. }
  29. this.setData({
  30. items
  31. })
  32. }
  33. })

WXML:

  1. <view class="container">
  2. <view class="page-body">
  3. <view class="page-section page-section-gap">
  4. <view class="page-section-title">默认样式</view>
  5. <label class="checkbox">
  6. <checkbox value="cb" checked="true"/>选中
  7. </label>
  8. <label class="checkbox">
  9. <checkbox value="cb" />未选中
  10. </label>
  11. </view>
  12. <view class="page-section">
  13. <view class="page-section-title">推荐展示样式</view>
  14. <view class="weui-cells weui-cells_after-title">
  15. <checkbox-group bindchange="checkboxChange">
  16. <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
  17. <view class="weui-cell__hd">
  18. <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
  19. </view>
  20. <view class="weui-cell__bd">{{item.name}}</view>
  21. </label>
  22. </checkbox-group>
  23. </view>
  24. </view>
  25. </view>
  26. </view>

版权声明: 本站所有内容均由互联网收集整理、上传,如涉及版权问题,我们第一时间处理。
原文链接地址:https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议