上一篇文章中,我们给大家介绍了小程序的视图容器及基础内容组件,该组件主要应用是输出内容。接下来这篇文章中,我们将继续介绍小程序最常用的表单组件,该组件主要应用是获取输入内容。表单组件分为11个组件,我们将对这11个组件使用做详细的介绍。
这里就是微信提供的11个表单组件,接下来文章中,我们将以Hello World为例,对这11个组件进行介绍。
在表单组件中,最常用的可能就是button
组件了,我们先用代码熟悉下button
的操作。和以前一样,参考这篇教程,搭建好基本的运行环境,然后修改index.wxml
内容如下。
<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
文件,写入下面的代码。
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
.mini-btn{
margin-right: 10rpx;
}
之后保存即可,你会看到batton
大部分组件演示,如图所示。
同样,button
组件也支持很多属性,这里我列出常用的属性,更多内容请参考官方文档。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
size | String | default | 按钮的大小 |
type | String | default | 按钮的样式类型 |
plain | Boolean | false | 按钮是否镂空,背景色透明 |
disabled | Boolean | false | 是否禁用 |
loading | Boolean | false | 名称前是否带 loading 图标 |
form-type | String | 用于 | |
hover-class | String | button-hover | 指定按钮按下去的样式类。当 |
hover-start-time | Number | 20 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 70 | 手指松开后点击态保留时间,单位毫秒 |
size 有效值:
值 | 说明 |
---|---|
default | 默认大小 |
mini | 小尺寸 |
type 有效值:
值 | 说明 |
---|---|
primary | 绿色 |
default | 白色 |
warn | 红色 |
form-type 有效值:
值 | 说明 |
---|---|
submit | 提交表单 |
reset | 重置表单 |
我们可以按照自己的需求设置相关按钮,比如我需要一个小尺寸红色手松开保留1秒的删除按钮,那么,参照上表,我可以这样写。
<button class="mini-btn" type="warn" size="mini" hover-stay-time="1000">删除</button>
button
组件使用起来就这么简单,大家可以按照自己的需求设置相关按钮哦~
开关组件很简单,直接上代码,编辑index.wxml
<view class="body-view">
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>
为了查看我们的按钮是否生效,大家可以打开index.js
,然后填入下面的代码。
Page({
switch1Change: function (e){
console.log('switch1 发生 change 事件,携带值为', e.detail.value)
},
switch2Change: function (e){
console.log('switch2 发生 change 事件,携带值为', e.detail.value)
}
})
编辑并保存,你会在微信控制台看到下图的内容,按钮开启或关闭执行switch1Change
函数,控制台打印输出。
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 |
参考上表,我们可以设置一个默认选中的红色对勾开关按钮,具体代码为
<switch bindchange="switch2Change" type='checkbox' color='red'/>
大家可以根据自己的需求设置一个自己喜欢的按钮。
除了正常的开关量以外,有时候我们还需要用到模拟量,这时出现一个滑块可供选择,那便是极好的,小程序官方给我们提供了一个slider
组件来负责变量设置,让用过能够通过滑块调整某项数值。首先,我们先写代码,来体验下slider
组件。打开index.wxml
文件,填入下面的代码。
<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>
如图,我们可以自己设定你滑块内容
以下就是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,并显示当前数值的滑块。那么我的代码可以这样写。
<slider backgroundColor="#FF9900" activeColor="#FF0000" block-color="#FFFF33" min="500" max="10000" step="20" value="5000" show-value/>
参考表格,大家会发现,其实撰写一个自己喜欢的按钮并不难,赶快去体验下吧。
小程序提供了选择器功能,用户可以通过按钮UI交互选择自己的选项。我们先尝试下面的代码。
<radio-group>
<radio/>中国
<radio/>美国
<radio/>巴西
<radio/>日本
<radio/>英国
<radio/>法国
</radio-group>
当然,单项选择器功能不只这些,我们先看看官方文档中的表格。
radio
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String |
| |
checked | Boolean | false | 当前是否选中 |
disabled | Boolean | false | 是否禁用 |
color | Color | radio的颜色,同css的color |
radio-group
单项选择器,内部由多个<radio/>
组成。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
bindchange | EventHandle |
|
可以看到,当<radio/>
有变化的时候,自动执行bindchange
属性指定的事件,同时返回valua携带的值。假设我们的需求为选项为红色,默认选中某个值,并且带标识返回valua值。那么代码可以这样写。首先在index.wxml
中填入下面的代码。
<radio-group bindchange="radioChange">
<label wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
然后打开index.js
文件,填入下面的代码。
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()
打印当前选项。
怎么样,会使用radio
组件了嘛?我们继续向下学习多项选择器。
同样,微信也提供了多项选择器,有了单项选择器的经验,我们对上面的代码做简单的修改即可实现多项选择器。首先,我们修改index.wxml
文件如下。
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
接下来修改index.js
文件。
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()
函数会返回相关的值到控制台。
输入框也是小程序比较常用的功能,废话不多说,直接上代码,和以前一样我们先试试一个简单的demo,修改index.wxml
文件,为如下内容。
<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
<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
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value
})
}
当用户输入内容的时候,自动调用bindKeyInput()
函数返回当前的内容。
又比如你想设置一个密码是输入框,并且输入密码的时候,优先弹出的是数字键盘,那么可以使用下面的代码。
<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>
某些情况下,单行输入框不能满足我们的要求,这就需要多行文本框,官方也提供了多行文本框的组件,我们先看代码。在index.wxml
文件中写入下面的代码。
<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>
如图,在第一个输入框中,我们输入内容后系统会自适应文本内容。第二个点击之后,系统会自动聚焦到输入框,并弹出输入法,我们来看看具体的属性内容。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 是在一个 |
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
很相似,大家可以通过表中内容自行定制需求去修改。
除了单项选择器和多项选择器,小程序还给我们提供了一种比较符合交互的选择器,就是滚动选择器,我们先看看从系统弹出的滚动选择器。修改index.wxml
文件为下列的代码。
<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
文件,为下列的代码。
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
})
}
})
我们看看效果
在图中,可以看出,系统已经给出我们需要选择的内容,我们可以在表中修改。
从底部弹起的滚动选择器,现支持五种选择器,通过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
中写入下面的内容
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
在index.js
中写入下面的内容
Page({
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
})
配合表格,我们可以看出,picker
中,我们设置当前选中的时间为{{time}},就是你选中的时间。同时,我们设置了时间的有效范围,从早上09:01到晚上的21:01,当我们设置完成,触发bindTimeChange
函数,改变选择的时间。
除了上面的页面弹出滚动器,小程序官方还提供了嵌入页面的滚动选择器,这里的选择器不像弹出选择器,提供了一堆模式,在嵌入页面的选择器,我们只能自己撰写逻辑去处理相关数据。比如时间选择器,我们可以这样写,首先,修改index.wxml
文件。
<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>
接下来,我们写逻辑部分。
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]]
})
}
})
通过这样的写法,我们就可以写出嵌入在页面的滚动选择器,如图。
嵌入在页面的选择器与从底部弹出的选择器有些不同,因为没有了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
组件相同,本文暂不在赘述。
使用过HTML语法的同学,肯定都知道label
组件,该组件可以优化用户选择,增加用户体验。怎么个优化法呢?我们先看看代码,修改index.wxml
文件。
<view>
<text>有label的选项</text>
<label>
<radio/>选项一
</label>
<label>
<radio/>选项二
</label>
</view>
<view>
<text>无label的选项</text>
<radio/>选项一
<radio/>选项二
</view>
在页面中,尝试点击选项一
和选项二
的文本,看看有什么区别。你会发现带label
的标签,点击文本即可自动点击选项,而无label
的标签,点击文字则无任何反应。这就是label的优势,你可以在复杂的表格中利用label优化用户选择。
form表单组件是所有表单组件中最重要的组件,没有form表单组件,上述的所有组件都不能提交数据到服务器或者小程序后端。为了快速体验是怎么一回事,我们先写一个简单的代码。
<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
文件中,增加下面的代码。
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
}
保存后,我们点击Submit
按钮,你会看到系统提示已经提交了当前的数据。
当然,我们可以提交多个数据,在提交之前,我们先看看官方的文档。
属性名 | 类型 | 说明 |
---|---|---|
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。
我们甚至可以多提交一些内容,修改代码为下面的内容,看看效果。
<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>
提交信息变更为
form发生了submit事件,携带数据为: {slider: 37, text: "文本123"}
我们看到系统日志已经返回了我们提交的值。
通过表单组件,你就可以写一个用户注册或用户登录,问卷系统等功能的页面了,后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。