4.4 表单组件_微信小程序开发零基础入门-QQ阅读女生现言网

书名：微信小程序开发零基础入门
作者名：周文洁
本章字数：5892字
更新时间：2025-02-23 16:07:53

4.4 表单组件

表单组件主要有10种，如表4-20所示。

表4-20 表单组件

4.4.1 button

<button>为按钮组件，该组件对应的常用属性如表4-21所示。

表4-21 button组件的常用属性

注意：hover-class的属性值button-hover默认为{background-color: rgba(0,0,0,0.1);opacity: 0.7;}。

size属性的有效值如下。

•　default：默认值，按钮宽度与手机屏幕宽度相同。

•　mini：迷你型按钮，按钮尺寸、字号都比普通按钮小。

例如：

1. <button size='default'>普通按钮</button>
2. <button size='mini'>迷你按钮</button>

其效果如图4-11所示。

图4-11 表单组件button的size属性的简单应用

type属性的有效值如下。

•　primary：主要按钮，按钮为绿色效果。

•　default：默认按钮，按钮为普通的灰白色效果。

•　warn：警告按钮，按钮为红色效果。

例如：

1. <button type='primary'>primary按钮</button>
2. <button type='default'>default按钮</button>
3. <button type='warn'>warn按钮</button>

其效果如图4-12所示。

图4-12 表单组件button的type属性的简单应用

form-type属性的有效值如下。

•　submit：提交表单。

•　reset：重置表单。

例如：

1. <button form-type='submit'>提交按钮</button>
2. <button form-type='reset'>重置按钮</button>

其效果如图4-13所示。

图4-13 表单组件button的form-type属性的简单应用

需要注意的是，这两款按钮目前只提供了页面样式效果，具体功能需要配合<form>组件一起使用才可生效，详见4.4.5节。

open-type属性的有效值如表4-22所示。

表4-22 button组件的open-type属性值

<button>组件还有一系列属性需要配合对应的open-type属性值才可生效，相关属性如表4-23所示。

表4-23 button组件的open-type相关属性

【例4-10】　表单组件button的简单应用

WXML（pages/demo03/button/button.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/button/button.js）的代码片段如下：

WXSS（pages/demo03/button/button.wxss）的代码如下：

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

图4-14 表单组件button的简单应用

【代码说明】

在button.wxml中设置了3组效果，即迷你按钮、普通按钮的不同状态、单击按钮获得用户信息。其中，第1组使用size='mini'实现了迷你按钮效果；第2组分别使用disabled和loading属性实现按钮禁用和加载动画效果；第3组为按钮追加了open-type='getUserInfo'状态，然后使用了自定义函数getUserDetail()获取用户信息。在button.js中设置了getUserDetail()函数的具体内容，即将获得的微信用户信息打印输出到Console控制台中。

在图4-14中，图(a)是页面初始效果，其中第2组中的loading属性会在按钮文字内容左边形成一个加载滚动的动画效果图标；图(b)为单击了第3组中的按钮后的效果，此时会触发getUserDetail()函数，并且在Console控制台打印输出当前的微信用户信息，包括微信头像、昵称、性别、所在省市等内容。

4.4.2 checkbox

<checkbox>为多选项目组件，往往需要与<checkbox-group>多项选择器组件配合使用，其中<checkbox-group>首尾标签之间可以包含若干个<checkbox>组件。

<checkbox-group>组件只有一个属性，如表4-24所示。

表4-24 <checkbox-group>组件属性

<checkbox>组件的属性如表4-25所示。

表4-25 <checkbox>组件属性

例如：

其效果如图4-15所示。

图4-15 表单组件checkbox的简单应用

由图4-15可见，“苹果”选项是默认被选中状态，“香蕉”选项是禁止选择状态，其他选项为未选中状态。

【例4-11】　表单组件checkbox的简单应用

WXML（pages/demo03/checkbox/checkbox.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/checkbox/checkbox.js）的代码片段如下：

运行效果如图4-16所示。

图4-16 表单组件checkbox的简单应用

【代码说明】

在checkbox.js的data中设置了一个数组checkboxItems，用于记录多选选项的名称（name）、值（value）以及初始的选中状态（checked）。在checkbox.wxml中使用<checkbox-group>标签形成多选组，并在其内部使用<view>标签配合wx:for循环实现批量生成多个checkbox组件的效果。

为达到监听选项改变的目的，在<checkbox-group>标签上添加属性bindchange，其属性值checkboxChange为自定义函数名称。然后在checkbox.js中追加该函数的具体内容，即每次被触发都在Console控制台打印输出最新选中的所有值。

在图4-16中，由图(a)可见页面初始显示效果成功识别了选项的名称和选中状态（默认“橙子”选项为选中效果）；由图(b)可见允许手动进行多选；图(c)为Console控制台输出的内容，由该图可见当选项被改变时会自动输出所有被选中的值。

4.4.3 input

<input>为输入框组件，其属性如表4-26所示。

表4-26 <input>组件属性

type属性的有效值如下。

•　text：文本输入键盘。

•　number：数字输入键盘。

•　idcard：身份证输入键盘。

•　digit：带小数点的数字键盘。

例如：

1. <input type='text' />
2. <input type='number' />
3. <input type='idcard ' />
4. <input type='digit' />

其效果如图4-17所示。

图4-17 表单组件input的type属性的简单应用

在图4-17中，图(a)为type='text'的键盘效果，此时是文本输入画面；图(b)为type='number'的键盘效果，此时是纯数字0~9，不带有小数点的；图(c)为type='idcard'的键盘效果，此时是文本输入画面；图(d)为type='digit'的键盘效果，此时是纯数字0~9，并且带有小数点符号。

confirm-type属性的有效值如下。

•　send：右下角显示“发送”按钮。

•　search：右下角显示“搜索”按钮。

•　next：右下角显示“下一个”按钮。

•　go：右下角显示“前往”按钮。

•　done：右下角显示“完成”按钮。

例如：

1. <input confirm-type='send' />
2. <input confirm-type='search' />
3. <input confirm-type='next' />
4. <input confirm-type='go' />
5. <input confirm-type='done' />

其效果如图4-18所示。

图4-18 表单组件input的confirm-type属性的简单应用

由图4-18可见，confirm-type属性的不同值会导致输入键盘右下角的按钮发生改变。需要注意的是，该属性的最终表现与手机输入法本身的实现有关，部分Android系统的输入法和第三方输入法可能不支持或不完全支持。

【例4-12】　表单组件input的简单应用

WXML（pages/demo03/input/input.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/input/input.js）的代码片段如下：

运行效果如图4-19所示。

图4-19 表单组件input的简单应用

【代码说明】

本示例包含了5组效果，即密码输入框、最大字符长度限制为10、禁用输入框、自定义placeholder样式以及输入框事件监听。在input.wxml中对第1~4组的<input>组件分别使用password、maxlength、disabled和placeholder-style属性实现效果。第5组使用了bindinput和bindblur属性分别绑定输入事件和失去焦点事件，在input.js中对应的自定义函数是getBlur()和getInput()。

4.4.4 label

<label>标签用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，单击时会触发对应的控件。该组件对应的属性如表4-27所示。

表4-27 <label>组件属性

注意：目前可以绑定的控件有<button>、<checkbox>、<radio>、<switch>。

这里以多选框<checkbox>为例，使用<label>标签的for属性的代码如下：

用户也可以将<checkbox>组件直接放在<label>内：

上述两种做法的效果完全相同，当用户单击文字内容时就会自动选中对应的控件。

需要注意的是，for的优先级高于内部控件，当内部有多个控件的时候默认触发第一个控件。

【例4-13】　表单组件label的简单应用

WXML的代码片段如下：

视频讲解

运行效果如图4-20所示。

图4-20 表单组件label的简单应用

【代码说明】

在label.wxml中设置了两组效果，即使用for属性绑定id、直接将控件放到label组件的内部。这两组效果均使用了<checkbox>完成，由图4-20可见两种情况的效果相同，均为单击文字即可选中对应的选项。

4.4.5 form

<form>为表单组件，需要与其他表单组件配合使用。其中，<form>首尾标签之间可以包含若干个供用户输入或选择的表单组件以及提交按钮。

<form>组件允许提交的内部表单组件值如下。

•　<switch>：开关选择器。

•　<input>：输入框组件。

•　<checkbox>：多项选择器。

•　<slider>：滑动选择器。

•　<radio>：单项选项器。

•　<picker>：滚动选择器。

<form>组件有3个属性，如表4-28所示。

表4-28 <form>组件属性

注意：表单中携带数据的组件（例如输入框）必须带有name属性值，否则无法识别提交内容。

【例4-14】　表单组件form的简单应用

WXML（pages/demo03/form/form.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/form/form.js）的代码片段如下：

WXSS（pages/demo03/form/form.wxss）的代码如下：

运行效果如图4-21所示。

图4-21 表单组件form的简单应用

【代码说明】

在form.wxml中包含了一个<form>组件，并为其绑定监听事件bindsubmit='onSubmit'和bindreset='onReset'，分别用于监听表单的提交和重置动作。在<form>组件内部放置了两个<input>标签，根据属性值不同（type='text'和password）分别用于输入用户名和密码。在<input>标签后面放置了两个<button>标签，根据form-type值不同（form-type='submit'和form-type='reset'）分别用于提交和重置表单。在form.wxss文件中设置<input>和<button>的外边距为10rpx宽，并为<input>加上1rpx宽的银色实线边框。在form.js中设置自定义函数onSubmit()和onReset()触发后的具体内容，即在Console控制台打印输出提示语句。

在图4-21中，图（a）是页面初始效果；图（b）是填入用户名与密码后的效果；图（c）是单击“重置”按钮后的效果，由该图可见将恢复到页面初始效果；图(d)是分别单击“提交”和“重置”按钮后Console控制台的3行输出内容，其中第1、2行是单击“提交”按钮后的提示语句，由该图可见用户输入的用户名和密码将在提交时被获取，第3行是单击“重置”按钮后的提示语句。

4.4.6 picker

<picker>是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持5种选择器，分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。若省略mode值不写，其默认效果是普通选择器。

1 普通选择器

当mode='selector'时为普通选择器效果，相关属性如表4-29所示。

表4-29 <picker mode='selector'>组件属性

例如自定义一个简易的普通选择器，其WXML代码片段如下：

在WXML代码中'{{selectorItems}}'是选项数组，bindchange='selectorChange'是选项改变时会触发的函数，{{selector}}是用于显示选项内容的变量，该数组、函数以及变量名称均为自定义。

对应的JS代码片段如下：

开发者可以自由更改数组内容和元素个数，运行效果如图4-22所示。

图4-22 表单组件picker的普通选择器的简单应用

2 多列选择器

当mode='multiSelector'时为多列选择器效果（最低版本为1.4.0），相关属性如表4-30所示。

表4-30 <picker mode='multiSelector'>组件属性

例如自定义一个简易的多列选择器，其WXML代码片段如下：

在WXML代码中{{multiSelectorItems}}是选项数组，bindchange='multiSelectorChange'是选项改变时会触发的函数，{{multiSelector}}是用于显示选项内容的变量，该数组、函数以及变量名称均为自定义。

对应的JS代码片段如下：

开发者可以自由更改数组内容和元素个数，运行效果如图4-23所示。

图4-23 表单组件picker的多列选择器的简单应用

3 时间选择器

当mode='time'时为时间选择器效果，相关属性如表4-31所示。

表4-31 <picker mode='time'>组件属性

例如自定义一个简易的时间选择器，其WXML代码片段如下：

在WXML代码中bindchange='timeChange'是选项改变时会触发的函数，{{time}}是用于显示选项内容的变量，该函数和变量名称均为自定义。

对应的JS代码片段如下：

运行效果如图4-24所示。

图4-24 表单组件picker的时间选择器的简单应用

4 日期选择器

当mode='date'时为日期选择器效果，相关属性如表4-32所示。

表4-32 <picker mode='date'>组件属性

其中，fields属性的有效值如下。

•　year：选择器粒度为年。

•　month：选择器粒度为月份。

•　day：选择器粒度为天。

例如自定义一个简易的日期选择器，其WXML代码片段如下：

在WXML代码中bindchange='dateChange'是选项改变时会触发的函数，{{date}}是用于显示选项内容的变量，该函数和变量名称均为自定义。

对应的JS代码片段如下：

运行效果如图4-25所示。

图4-25 表单组件picker的日期选择器的简单应用

5 省市区选择器

当mode='region'时为省市区选择器效果（最低版本为1.4.0），相关属性如表4-33所示。

表4-33 <picker mode='region'>组件属性

例如自定义一个简易的省市区选择器，其WXML代码片段如下：

在WXML代码中bindchange='regionChange'是选项改变时会触发的函数，{{region}}是用于显示选项内容的变量，该函数和变量名称均为自定义。

对应的JS代码片段如下：

注意：这里的e.detail.value是一个包含3个元素的数组，分别表示省、市、区。

运行效果如图4-26所示。

图4-26 表单组件picker的省市区选择器的简单应用

【例4-15】　表单组件picker的简单应用

WXML（pages/demo03/picker/picker.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/picker/picker.js）的代码片段如下：

【代码说明】

本示例是将5种选择器的代码汇总而成，因此不再赘述实现过程，运行效果也请读者参照前面的图4-22~图4-26。

4.4.7 picker-view

<picker-view>是嵌入页面的滚动选择器，相关属性如表4-34所示。

表4-34 <picker-view>组件属性

在<picker-view>中需要放置1~N个<picker-view-column>来表示对应的列选项。需要注意的是，<picker-view-column>仅可放置于<picker-view>中，其子节点的高度会自动设置成与<picker-view>选中框的高度一致。

【例4-16】　表单组件picker-view的简单应用

WXML（pages/demo03/picker-view/picker-view.wxml）的代码片段如下：

视频讲解

WXSS（pages/demo03/picker-view/picker-view.wxss）的代码片段如下：

JS（pages/demo03/picker-view/picker-view.js）的代码片段如下：

运行效果如图4-27所示。

图4-27 表单组件picker-view的简单应用

【代码说明】

本示例在picker-view.wxml中设置了一个<picker-view>组件用于模拟点餐，其内部包含3列<picker-view-column>，分别用于显示西餐菜单中的汤、主食和甜点。在每个<picker-view-column>内部均使用<view>组件配合wx:for语句循环显示对应的数组选项，分别是{{soup}}、{{maincourse}}和{{dessert}}。另外，为<picker-view>组件绑定了自定义事件监听，即bindchange='pickerviewChange'，当用户更改了菜单选项时会被触发。

在picker-view.js中规定，若pickerviewChange()函数被触发则获取最新选项列的数组下标，并将结果更新到{{menu}}变量中，最后显示到<picker-view>组件的上方。

在图4-27中，图（a）为页面初始效果，此时默认选中每列的第2个选项；图（b）为菜单更改后的效果，由该图可见此时最新选项的内容已经显示到菜单顶端。

4.4.8 radio

<radio>为单选框组件，往往需要与<radio-group>组件配合使用，其中<radio-group>首尾标签之间可以包含若干个<radio>组件。

<radio-group>组件只有一个属性，如表4-35所示。

表4-35 <radio-group>组件属性

<radio>组件的属性如表4-36所示。

表4-36 <radio>组件属性

例如：

其效果如图4-28所示。

图4-28 表单组件radio的简单应用

由图4-28可见，“西瓜”选项是默认被选中状态，“橙子”选项是禁止选择状态，其他选项为未选中状态。注意，<radio-group>组件内部不允许多选，一旦选择了其他选项，原先被选中的选项将变回未选中状态。

【例4-17】　表单组件radio的简单应用

WXML（pages/demo03/radio/radio.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/radio/radio.js）的代码片段如下：

运行效果如图4-29所示。

图4-29 表单组件radio的简单应用

【代码说明】

在radio.js的data中设置了一个数组radioItems，用于记录多选选项的名称（name）、值（value）以及初始的选中状态（checked）。在radio.wxml中使用<radio-group>标签形成单选组，并在其内部使用<view>标签配合wx:for循环实现批量生成多个radio组件的效果。

为达到监听选项改变的目的，在<radio-group>标签上添加属性bindchange，其属性值radioChange为自定义函数名称。然后在radio.js中追加该函数的具体内容，即每次被触发都在Console控制台打印输出最新选中的所有值。

在图4-29中，由图（a）可见页面初始显示效果成功识别了选项的名称和选中状态（默认橙子选项为选中效果）；由图（b）可见一旦选了新的选项，原先的选项将自动取消选中状态；图（c）为Console控制台的输出内容，由该图可见当选项被改变时会自动输出被选中的值。

4.4.9 slider

<slider>为滑动选择器，该组件对应的属性如表4-37所示。

表4-37 <slider>组件属性

例如制作一个自定义滑动条，最小值为50、最大值为200，并且在右侧显示当前数值：

<slider min="50" max="200" show-value/>

其效果如图4-30所示。

图4-30 表单组件slider的简单应用

滑动条主要是由滑动线条与滑块组成的，滑块左侧的彩色线条为选中的数值范围。滑块越往右移动，所显示的数值就越大。

【例4-18】　表单组件slider的简单应用

WXML（pages/demo03/slider/slider.wxml）的代码片段如下：

视频讲解

JS（pages/demo03/slider/slider.js）的代码片段如下：

1. Page({
2.   sliderChange: function(e) {
3.     console.log('slider发生变化，当前值是：' + e.detail.value)
4.   }
5. })

运行效果如图4-31所示。

图4-31 表单组件slider的简单应用

【代码说明】

本示例依次列举了4种滑动条的情况，即滑动条右侧显示当前取值、自定义滑动条颜色和滑块样式、禁用滑动条（无法改变当前数值）、滑动条事件监听。

在图4-31中，图（a）是页面初始状态，由该图可见滑动条1显示当前取值，滑动条2及其滑块的颜色更改为红色，并且滑块的尺寸缩小为20，滑动条3由于被禁用，滑块无法被拖动；图（b）是更改滑动条4的滑块位置后的效果图，此时会触发<slider>标签上的bindchange='sliderChange'事件；图（c）是sliderChange事件的运行结果，由该图可见在Console控制台上会输出slider的最新值。

4.4.10 switch

<switch>为开关选择器，该组件对应的属性如表4-38所示。

表4-38 <switch>组件属性

例如：

1. <switch checked />选中
2. <switch />没选中

其效果如图4-32所示。

图4-32 表单组件switch的简单应用

由图4-32可见，当按钮在右边时为选中状态，此时选择器为彩色效果；当按钮在左边时为没选中状态，此时选择器为黑白效果。

【例4-19】　表单组件switch的简单应用

WXML（pages/demo03/switch/switch.wxml）的代码片段如下：

视频讲解

1. <view class='title'>3.表单组件switch的简单应用</view>
2. <view class='demo-box'>
3.   <view class='title'>switch事件监听</view>
4.   <switch checked bindchange="switchChange" />
5. </view>

JS（pages/demo03/switch/switch.js）的代码片段如下：

运行效果如图4-33所示。

图4-33 表单组件switch的简单应用

【代码说明】

在switch.wxml中使用<switch>标签配合checked属性实现默认选中的状态，并绑定自定义单击事件switchChange。在switch.js中描述switchChange()函数，一旦被触发就在Console控制台输出当前switch的选择结果。由图4-33可见，关闭switch开关后Console控制台输出false。