组件icon、radio、checkbox（10）

icon的属性

type的类型： 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'

<icon type="success" size="50" color="black"></icon>

radio单选框组件

• radio必须和父元素radio-group一起使用
• value是单选框选中的值
• radio-group需要绑定事件

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handlechange(e){
    //console.log(e);
    let gender=e.detail.value;//获取单选框的值
    //var申明的变量是全局变量，其作用域为所在的函数内
	//let声明的变量是局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能用了
	//const声明一个只读的常量。
    
    //赋值给data中
    this.setData({
      gender//gender:gender用法相同
      //目的是改变当前页面中的gender，是改变wxml的变量gender
    })
  }  
})

wxml

<radio-group bindchange="handlechange">
  <radio value="man">男</radio>
  <radio value="woman">女</radio>
</radio-group>
<view>您选中的是：{{gender}}</view>

checkbox复选框组件

需要搭配 checkbox-group ⼀起使⽤，且可以同时选中多个数据
其他和radio一样
js

  data: {
    list:[
      {
        id:0,
        name:"🍎",
        value:"apple"
      },
      {
        id:1,
        name:"🍌",
        value:"banana"
      },{
        id:1,
        name:"🍊",
        value:"orange"
      }
    ],
    checklist:[]
  },
 handleItemChange(e){
    //console.log(e);
    const checklist=e.detail.value;
    this.setData({
      checklist
    })

wxml

<view>您选中的是：{{gender}}</view>
<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">
      {{item.name}}
    </checkbox> 
  </checkbox-group>
  <view>您选中的是：{{checklist}}</view>
</view>