开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

今天也只是对微信小程序和支付宝小程序表单中不同组件，有哪些不同的地方，进行了整理。

其实不同主要在于有些组件会与data数据进行绑定，这样的话该组件就成为了受控组件，无法对该组件进行操作，只能通过setData进行操作。

textarea 多行输入框（受控）

1. 多行输入框，可输入多行内容。支持使用 my.hideKeyboard 接口隐藏输入键盘。可以在 input 组件中加上 enableNative="{{false}}"，避免 textarea 弹出键盘后出现内容上移。在 textarea 代码中加上 enableNative="{{false}}" ，可解决 Android 系统下 textarea 获取焦点的时候文字消失问题。
2. 注意：textarea添加controlled属性的话，就使该组件成为受控组件，受控组件的话，就受setData控制。再往多行文本框里输入内容的话，就输入不进去了。

radio 单选按钮

可以有color属性，设置但渲染按钮的颜色。 可以被<radio-group>进行包裹，这样的话就可以再多个选项之间进行单选。

picker-view 滚动选择器

1. 嵌入页面的滚动选择器。 其中只可放置 picker-view-column 组件，其它节点不会显示。如需获取数组中值，可以先获取索引 index 然后通过 index 再获取数组中值。
2. 使用该组件，有一定的限制，如下：

• 该组件内部请勿放入 hidden 或 display none 的节点，需要隐藏请用 a:if 切换。
• 不支持背景色设置成透明，可以修改颜色。

picker 底部弹起的滚动选择器

选择器包括一个或多个不同值的可滚动列表，每个值可以在视图的中心以较暗的文本形式显示。当用户正在编辑字段或点击菜单时，选择器通常会从屏幕底部弹起（iOS）或中间弹出（Android）。

switch 单选开关（受控）

作用：单选开关。（药丸开关）

使用该组件也有一定的限制

• iOS 和 Android 展现样式有所差异。iOS 单选开关为圆形，Android 单选开关为方形。
• 不支持自定义 switch 样式，如大小等。 注意：如果给它加了controlled：true/false；的话，他也成为受控组件。再去点击它就不管用了，只能通过某件事改变data里的数据，从而使该组件改变状态

//axml文件
<button size="default" type="primary" onTap="changeSwitch">改变药丸按钮</button>
  <switch checked="{{boolean}}" controlled/>
//js文件
page({
   data:{
     boolean:false
   },
    // 改变药丸按钮事件
  changeSwitch(){
    this.setData({
      boolean:!this.data.boolean
    })
  }
})