4.2 用户输入相关组件

用户与程序进行交互的方式主要有两种：通过手势进行交互或通过输入数据进行交互。本节主要介绍小程序开发中常用的用户输入相关组件，如为用户提供选择的选择器组件、进行用户输入的表单组件等。

4.2.1 checkbox组件

checkbox组件用来创建复选框，复选框是指一组支持多选的选项列表，示例代码如下：

运行代码，效果如图4-8所示。

checkbox组件需要放入check-group组件中使用，check-group组件通过设置bindchange属性指定当用户对组内选项框操作后的回调函数，在回调函数中会将选中的复选框的value属性值传递进来。

checkbox组件的常用属性如表4-7所示。

4.2.2 radio组件

checkbox组件用来创建可以多选的选项组，radio组件用来创建只能单选的选项组。radio的用法和checkbox基本一致，示例代码如下：

运行代码，效果如图4-9所示。

radio组件也需要放入radio-group组件中组合成单选选项组，同一个组中的选项互斥，用户只能选中其中的一项。radio-group也可以绑定bindchange属性设置用户选择的回调函数，回调函数会将用户选中的选项的value值包装在事件对象中传入。

radio组件的常用属性如表4-8所示。

4.2.3 input组件

input组件是一个原生组件，用来接收用户使用键盘输入的内容，示例代码如下：

运行代码，效果如图4-10所示。

上述示例代码创建了一个最基本的input输入框组件，用户单击输入框后会唤起键盘，操作键盘进行输入框文本的键入，开发者可以绑定多种回调方法接收用户的交互事件。input组件的常用属性如表4-9所示。

4.2.4 switch组件

switch组件用来创建开关视图，其使用非常简单，示例代码如下：

运行代码，效果如图4-11所示。

switch组件的常用属性如表4-10所示。

4.2.5 label组件

label组件是一个辅助组件，用来对button组件、checkbox组件、radio组件和switch组件进行扩展。这4个交互组件上面都有介绍，它们的使用虽然简洁，功能也比较强大，但是交互的定制上有一些局限性。例如，若要触发按钮事件，用户必须对button组件本身进行交互；若要操作选择框，用户必须直接单击上面列举的选择框组件。

如果想要实现用户交互某个自定义的组建时触发上述组件的交互事件，那么可以使用label组件作为上面4种组件的标签。示例代码如下：

运行代码，效果如图4-12所示。

单击label组件可以直接操作checkbox组件、radio组件和switch组件，label组件关联其他交互组件的方式有两种：一种是将要被关联的交互组件放入label标签内部，也可以继续添加其他组件；另一种是通过指定for属性，for属性的值用来标记其他交互组件的id，通过id关联其他交互组件对其进行控制。

4.2.6 slider组件

slider组件允许用户通过拖曳设置滑块的值，并且提供了丰富的接口对其取值范围、步长、颜色等属性进行设置。示例代码如下：

运行代码，效果如图4-13所示。

从UI展现来看，slider组件与progress组件十分相似，不同的是，slider组件可交互，用户可以操作其上的滑块进行拖曳。slider组件的常用属性如表4-11所示。

4.2.7 textarea组件

input是小程序开发框架提供的一种文本输入组件，其特点是只允许用户输入单行文本，如果用户输入的文本宽度大于输入框本身的宽度，文字会水平进行滚动，这样的组件适用于输入简要文本的场景。

在实际开发中，很多情况需要用户输入长文本，如在社交类应用程序中用户发布动态、在阅读类应用程序中用户发表文章等，textarea组件支持用户输入多行文本。

textarea组件的使用与input组件的使用基本一致，示例代码如下：

运行代码，效果如图4-14所示。

需要注意的是，当用户输入的文本过长，超过textarea的高度时，textarea会自动支持垂直滚动。与input组件一样，textarea组件中也有许多可配置的属性，如表4-12所示。