微信小程序开发学习笔记——3.9checkbox多选按钮及label组件

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=23&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、textarea

event.wxml

<!--多行输入框-->
  <textarea 
  class="textarea"
  placeholder="请输入详细的内容">
  </textarea>
  <!-- 多选项目 -->

 event.wxss

.textarea{
  background: #eee;
  margin-bottom:20rpx;
  width:100%;
  /* width: calc(100% - 40rpx);如果不用box-sizing，可以用这种方法防止区域因为设置了padding而外扩 */
  height: 220rpx;
  padding:20rpx;/*元素内容和元素边框之间的距离*/
  box-sizing: border-box;/*使padding值依然存在，但是区域不会向外扩充 */
}

 

二、checkbox

1、属性

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

表单组件 / checkbox-group (qq.com)

2、代码例子

event.wxml文件中添加以下代码

用label包裹checkbox，这样点击文字也能够选中打勾。

<!-- 多选项目 -->
  <checkbox-group bindchange="checkChange">  
    <view style="padding-bottom: 20rpx;">
      <label>
        <checkbox value="diaoyu"></checkbox>
        <text>钓鱼</text>
      </label> 
    </view>
    
    <view style="padding-bottom: 20rpx;">
      <label>
        <checkbox checked  value="game"></checkbox>
        <text>打游戏</text>
      </label> 
    </view>
    
    <view style="padding-bottom: 20rpx;">
      <label>
        <checkbox color="red"  value="lookbook"></checkbox>
        <text>看书</text>
      </label> 
    </view>
  </checkbox-group>

event.js中的page下添加如下代码，可以看看点击后返回值

  checkChange(e){
    console.log(e);
  },

3、结果