如何使用小程序表单组件

上一篇文章中，我们给大家介绍了小程序的视图容器及基础内容组件，该组件主要应用是输出内容。接下来这篇文章中，我们将继续介绍小程序最常用的表单组件，该组件主要应用是获取输入内容。表单组件分为11个组件，我们将对这11个组件使用做详细的介绍。

  • button - 按钮组件
  • switch - 开关组件
  • slider - 滑动选择器
  • radio - 单项选择器
  • chechbox - 多项选择器
  • input - 输入框
  • textarea - 多行输入框
  • picker - 从底部弹起的滚动选择器
  • picker-view - 嵌入页面的滚动选择器
  • label - 改进用户可用性选择组件
  • form - 表单组件，将用户输入的内容提交

这里就是微信提供的11个表单组件，接下来文章中，我们将以Hello World为例，对这11个组件进行介绍。

Hello World - button按钮组件

在表单组件中，最常用的可能就是button组件了，我们先用代码熟悉下button的操作。和以前一样，参考这篇教程，搭建好基本的运行环境，然后修改index.wxml内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<view class="btn-area" id="buttonContainer">
  <button type="primary">页面主操作 Normal</button>
  <button type="primary" loading="true">页面主操作 Loading</button>
  <button type="primary" disabled="true">页面主操作 Disabled</button>

  <button type="default">页面次要操作 Normal</button>	
  <button type="default" disabled="true">页面次要操作 Disabled</button>

  <button type="warn">警告类操作 Normal</button>
  <button type="warn" disabled="true">警告类操作 Disabled</button>

  <view class="button-sp-area">
    <button type="primary" plain="true">按钮</button>
    <button type="primary" disabled="true" plain="true">不可点击的按钮</button>

    <button type="default" plain="true">按钮</button>
    <button type="default" disabled="true" plain="true">按钮</button>

    <button class="mini-btn" type="primary" size="mini">按钮</button>
    <button class="mini-btn" type="default" size="mini">按钮</button>
    <button class="mini-btn" type="warn" size="mini">按钮</button>
  </view>
</view>

然后打开index.wxss文件，写入下面的代码。

1
2
3
4
5
6
7
8
9
10
11
button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.button-sp-area{
  margin: 0 auto;
  width: 60%;
}
.mini-btn{
  margin-right: 10rpx;
}

之后保存即可，你会看到batton大部分组件演示，如图所示。

1541474442384

同样，button组件也支持很多属性，这里我列出常用的属性，更多内容请参考官方文档。

属性名 类型 默认值 说明
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空，背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
form-type String 用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
hover-class String button-hover 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time Number 20 按住后多久出现点击态，单位毫秒
hover-stay-time Number 70 手指松开后点击态保留时间，单位毫秒

size 有效值：

值 说明
default 默认大小
mini 小尺寸

type 有效值：

值 说明
primary 绿色
default 白色
warn 红色

form-type 有效值：

值 说明
submit 提交表单
reset 重置表单

我们可以按照自己的需求设置相关按钮，比如我需要一个小尺寸红色手松开保留1秒的删除按钮，那么，参照上表，我可以这样写。

1
<button class="mini-btn" type="warn" size="mini" hover-stay-time="1000">删除</button>

button组件使用起来就这么简单，大家可以按照自己的需求设置相关按钮哦~

Hello World - switch开关组件

开关组件很简单，直接上代码，编辑index.wxml

1
2
3
4
<view class="body-view">
    <switch checked bindchange="switch1Change"/>
    <switch bindchange="switch2Change"/>
</view>

为了查看我们的按钮是否生效，大家可以打开index.js，然后填入下面的代码。

1
2
3
4
5
6
7
8
Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

编辑并保存，你会在微信控制台看到下图的内容，按钮开启或关闭执行switch1Change函数，控制台打印输出。

1541475579829

switch组件也支持若干属性，具体如下。

属性名 类型 默认值 说明
checked Boolean false 是否选中
disabled Boolean false 是否禁用
type String switch 样式，有效值：switch, checkbox
bindchange EventHandle checked 改变时触发 change 事件，event.detail={ value:checked}
color Color switch 的颜色，同 css 的 color

参考上表，我们可以设置一个默认选中的红色对勾开关按钮，具体代码为

1
<switch bindchange="switch2Change" type='checkbox' color='red'/>

大家可以根据自己的需求设置一个自己喜欢的按钮。

Hello World - slider滑动选择器

除了正常的开关量以外，有时候我们还需要用到模拟量，这时出现一个滑块可供选择，那便是极好的，小程序官方给我们提供了一个slider组件来负责变量设置，让用过能够通过滑块调整某项数值。首先，我们先写代码，来体验下slider组件。打开index.wxml文件，填入下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="section section_gap">
  <text class="section__title">设置step</text>
  <view class="body-view">
    <slider step="5"/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <view class="body-view">
    <slider show-value/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider min="50" max="200" show-value/>
  </view>
</view>

如图，我们可以自己设定你滑块内容

1541476483936

以下就是slider所有属性

属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长，取值必须大于 0，并且可被(max - min)整除
disabled Boolean false 是否禁用
value Number 0 当前取值
activeColor Color #1aad19 已选择的颜色
backgroundColor Color #e9e9e9 背景条的颜色
block-size Number 28 滑块的大小，取值范围为 12 - 28
block-color Color #ffffff 滑块的颜色
show-value Boolean false 是否显示当前 value
bindchange EventHandle 完成一次拖动后触发的事件，event.detail = {value: value}
bindchanging EventHandle 拖动过程中触发的事件，event.detail = {value: value}

根据需求，我们可以行设置代码，比如我们需要设置一个背景为橙底，已选择颜色为红色，滑块为黄色，最小值500，最大值10000，步长为20，默认值为5000，并显示当前数值的滑块。那么我的代码可以这样写。

1
<slider backgroundColor="#FF9900" activeColor="#FF0000" block-color="#FFFF33" min="500" max="10000" step="20" value="5000" show-value/>

参考表格，大家会发现，其实撰写一个自己喜欢的按钮并不难，赶快去体验下吧。

Hello World - radio单项选择器

小程序提供了选择器功能，用户可以通过按钮UI交互选择自己的选项。我们先尝试下面的代码。

1
2
3
4
5
6
7
8
<radio-group>
<radio/>中国
<radio/>美国
<radio/>巴西
<radio/>日本
<radio/>英国
<radio/>法国
</radio-group>

1541486518341

当然，单项选择器功能不只这些，我们先看看官方文档中的表格。

radio

属性名 类型 默认值 说明
value String <radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用
color Color radio的颜色，同css的color

radio-group

单项选择器，内部由多个<radio/>组成。

属性名 类型 默认值 说明
bindchange EventHandle <radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

可以看到，当<radio/>有变化的时候，自动执行bindchange属性指定的事件，同时返回valua携带的值。假设我们的需求为选项为红色，默认选中某个值，并且带标识返回valua值。那么代码可以这样写。首先在index.wxml中填入下面的代码。

1
2
3
4
5
<radio-group bindchange="radioChange">
  <label  wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

然后打开index.js文件，填入下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

将需要的选项都写在js里面，通过for循环需显示，我们看到，当选项发生变化时，会自动执行函数radioChange()打印当前选项。

1541487115061

怎么样，会使用radio组件了嘛？我们继续向下学习多项选择器。

Hello World - chechbox多项选择器

同样，微信也提供了多项选择器，有了单项选择器的经验，我们对上面的代码做简单的修改即可实现多项选择器。首先，我们修改index.wxml文件如下。

1
2
3
4
5
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

接下来修改index.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

我们看到，通过不同的选项，checkboxChange()函数会返回相关的值到控制台。

1541487618480

Hello World - input输入框

输入框也是小程序比较常用的功能，废话不多说，直接上代码，和以前一样我们先试试一个简单的demo，修改index.wxml文件，为如下内容。

1
<input placeholder="点我可以输入文本"/>

这就是最简单的用法，当然，小程序官方为input提供了很多属性，我们先看看。

属性名 类型 默认值 说明
value String 输入框的初始内容
type String “text” input 的类型
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String “input-placeholder” 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing Number / String 0 指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus Boolean false (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus Boolean false 获取焦点
confirm-type String “done” 设置键盘右下角按钮的文字，仅在type=’text’时生效
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起
cursor Number 指定focus时的光标位置
selection-start Number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end Number -1 光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position Boolean true 键盘弹起时，是否自动上推页面
bindinput EventHandle 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus EventHandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value}
bindconfirm EventHandle 点击完成按钮时触发，event.detail = {value: value}

type 有效值

值 说明
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

confirm-type 有效值

值 说明
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

通过官方提供的属性，我们可以实现自己想要的一些功能。比如我想获取当前用户输入的返回内容，那么可以使用下面的代码。

index.wxml

1
2
3
4
5
6
<view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
 <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
     <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
   </view>
 </view>

index.js

1
2
3
4
5
bindKeyInput(e) {
  this.setData({
    inputValue: e.detail.value
  })
}

当用户输入内容的时候，自动调用bindKeyInput()函数返回当前的内容。

又比如你想设置一个密码是输入框，并且输入密码的时候，优先弹出的是数字键盘，那么可以使用下面的代码。

1
2
3
4
5
6
<view class="weui-cells__title">密码输入的input</view>
<view class="weui-cells weui-cells_after-title">
  <view class="weui-cell weui-cell_input">
    <input class="weui-input" password type="number" placeholder="这是一个密码输入框" />
  </view>
</view>

Hello World - textarea多行输入框

某些情况下，单行输入框不能满足我们的要求，这就需要多行文本框，官方也提供了多行文本框的组件，我们先看代码。在index.wxml文件中写入下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
    <view class="textarea-wrp">
      <textarea auto-height />
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">这是一个可以自动聚焦的textarea</view>
    <view class="textarea-wrp">
      <textarea auto-focus="true" style="height: 3em" />
    </view>
  </view>
</view>

1541491043240

如图，在第一个输入框中，我们输入内容后系统会自适应文本内容。第二个点击之后，系统会自动聚焦到输入框，并弹出输入法，我们来看看具体的属性内容。

属性名 类型 默认值 说明
value String 输入框的内容
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String textarea-placeholder 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度，设置为 -1 的时候不限制最大长度
auto-focus Boolean false 自动聚焦，拉起键盘。
focus Boolean false 获取焦点
auto-height Boolean false 是否自动增高，设置auto-height时，style.height不生效
fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
cursor-spacing Number / String 0 指定光标与键盘的距离，单位px或rpx，默认为px。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
cursor Number 指定focus时的光标位置
show-confirm-bar Boolean true 是否显示键盘上方带有”完成“按钮那一栏
selection-start Number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end Number -1 光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position Boolean true 键盘弹起时，是否自动上推页面
bindfocus EventHandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur EventHandle 输入框失去焦点时触发，event.detail = {value, cursor}
bindlinechange EventHandle 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle 当键盘输入时，触发 input 事件，event.detail = {value, cursor}，bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm EventHandle 点击完成时， 触发 confirm 事件，event.detail = {value: value}

这里的属性和input很相似，大家可以通过表中内容自行定制需求去修改。

Hello World - picker - 从底部弹起的滚动选择器

除了单项选择器和多项选择器，小程序还给我们提供了一种比较符合交互的选择器，就是滚动选择器，我们先看看从系统弹出的滚动选择器。修改index.wxml文件为下列的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

接下来，修改index.js文件，为下列的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '无脊柱动物'
        },
        {
          id: 1,
          name: '脊柱动物'
        }
      ], [
        {
          id: 0,
          name: '扁性动物'
        },
        {
          id: 1,
          name: '线形动物'
        },
        {
          id: 2,
          name: '环节动物'
        },
        {
          id: 3,
          name: '软体动物'
        },
        {
          id: 3,
          name: '节肢动物'
        }
      ], [
        {
          id: 0,
          name: '猪肉绦虫'
        },
        {
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1:
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            data.multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.multiArray[2] = ['蛔虫'];
                break;
              case 2:
                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                break;
              case 3:
                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                break;
              case 4:
                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

我们看看效果

1541491511355

在图中，可以看出，系统已经给出我们需要选择的内容，我们可以在表中修改。

**从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。**因为不同的模式内容较多，我这里就不一一列出，感兴趣的同学可以去这里查看。我这里只演示时间选择器的使用。

时间选择器：mode = time

属性名 类型 默认值 说明
value String 表示选中的时间，格式为”hh:mm”
start String 表示有效时间范围的开始，字符串格式为”hh:mm”
end String 表示有效时间范围的结束，字符串格式为”hh:mm”
bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value}
bindcancel EventHandle 取消选择时触发
disabled Boolean false 是否禁用

你可以使用下面的代码来实现时间选择器的使用，在index.wxml中写入下面的内容

1
2
3
4
5
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
    当前选择: {{time}}
  </view>
</picker>

在index.js中写入下面的内容

1
2
3
4
5
6
7
8
Page({
  bindTimeChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
})

配合表格，我们可以看出，picker中，我们设置当前选中的时间为，就是你选中的时间。同时，我们设置了时间的有效范围，从早上09:01到晚上的21:01，当我们设置完成，触发bindTimeChange函数，改变选择的时间。

Hello World - picker-view嵌入页面的滚动选择器

除了上面的页面弹出滚动器，小程序官方还提供了嵌入页面的滚动选择器，这里的选择器不像弹出选择器，提供了一堆模式，在嵌入页面的选择器，我们只能自己撰写逻辑去处理相关数据。比如时间选择器，我们可以这样写，首先，修改index.wxml文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

接下来，我们写逻辑部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
  months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange: function(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

通过这样的写法，我们就可以写出嵌入在页面的滚动选择器，如图。

1541492614277

嵌入在页面的选择器与从底部弹出的选择器有些不同，因为没有了mode我们只能自己去写相关内容。

属性名 类型 说明
value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style String 设置选择器中间选中框的样式
indicator-class String 设置选择器中间选中框的类名
mask-style String 设置蒙层的样式
mask-class String 设置蒙层的类名
bindchange EventHandle 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
bindpickstart EventHandle 当滚动选择开始时候触发事件
bindpickend EventHandle 当滚动选择结束时候触发事件

功能与picker组件相同，本文暂不在赘述。

Hello World - label改进用户可用性选择组件

使用过HTML语法的同学，肯定都知道label组件，该组件可以优化用户选择，增加用户体验。怎么个优化法呢？我们先看看代码，修改index.wxml文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view>
  <text>有label的选项</text>
  <label>
    <radio/>选项一
  </label>
  <label>
    <radio/>选项二
  </label>
</view>
<view>
  <text>无label的选项</text>
  <radio/>选项一
  <radio/>选项二
</view>

在页面中，尝试点击选项一和选项二的文本，看看有什么区别。你会发现带label的标签，点击文本即可自动点击选项，而无label的标签，点击文字则无任何反应。这就是label的优势，你可以在复杂的表格中利用label优化用户选择。

Hello World - form表单组件

form表单组件是所有表单组件中最重要的组件，没有form表单组件，上述的所有组件都不能提交数据到服务器或者小程序后端。为了快速体验是怎么一回事，我们先写一个简单的代码。

1
2
3
4
5
6
7
8
9
<form bindsubmit="formSubmit">
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
  </view>
</form>

然后在index.js文件中，增加下面的代码。

1
2
3
formSubmit: function (e) {
  console.log('form发生了submit事件，携带数据为：', e.detail.value)
}

保存后，我们点击Submit按钮，你会看到系统提示已经提交了当前的数据。

1541494677745

当然，我们可以提交多个数据，在提交之前，我们先看看官方的文档。

属性名 类型 说明
report-submit Boolean 是否返回 formId 用于发送模板消息
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset EventHandle 表单重置时会触发 reset 事件

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

我们甚至可以多提交一些内容，修改代码为下面的内容，看看效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>
  <view class="section section_gap">
    <view class="section__title">文本</view>
    <input name="text" placeholder="点我可以输入文本"/>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
  </view>
</form>

提交信息变更为

1
form发生了submit事件，携带数据为： {slider: 37, text: "文本123"}

我们看到系统日志已经返回了我们提交的值。

总结

通过表单组件，你就可以写一个用户注册或用户登录，问卷系统等功能的页面了，后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！

原创
#微信 #小程序
如何使用小程序表单组件
https://www.techeek.cn/wx-from/
作者
大橙子
发布于
2018年11月6日
许可协议