微信小程序组件——表单组件
发布时间:2019-08-07 18:11:16作者:wangjian浏览量:210点赞量:0
一:button按钮
button组件属性:
size:按钮的大小,默认为default,可选参数defaul(默认大小),mini(小尺寸)
type:按钮的样式类型,默认为default,可选参数:primary(绿色),default(白色),warn(红色)
plain:按钮是否镂空,背景色透明,默认为false
disabled:是否禁用,默认为false
loading:名称前是否带 loading 图标,默认为false
form-type:用于 form 组件,可选参数为:submit(提交表单),reset(重置表单 )点击分别会触发 form 组件的submit/reset
open-type:微信开放能力,常用参数为:getPhoneNumber(获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息),getUserInfo(获取用户信息,可以从bindgetuserinfo回调中获取到用户信息)
hover-class:指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果,默认为button-hover
hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态,默认为false
hover-start-time:按住后多久出现点击态,单位毫秒,默认为20
hover-stay-time:手指松开后点击态保留时间,单位毫秒,默认为70
lang:指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文,默认为en
bindgetuserinfo:用户点击该按钮时,会返回获取到的用户信息,open-type="getUserInfo"时有效
bindgetphonenumber:获取用户手机号回调,open-type=getPhoneNumber时有效
例:
<!-- wxml -->
<view wx:for="{{types}}">
<button
type="{{item}}"
size="{{warnSize}}"
loading="{{loading}}"
plain="{{plain}}"
disabled="{{disabled}}"
bindtap="{{item}}"
> {{item}} </button>
</view>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="userInfo">获取用户信息</button>
<button open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="phoneNumber">获取用户手机号</button>
Page({
data: {
disabled: false,//设置是否禁用
plain: false,//设置是否镂空
loading: false,//设置名称前是否加loading
types: ['default', 'primary', 'warn']
},
userInfo: function (e) {
//授权获取用户信息
console.log(e.detail)
},
phoneNumber: function (e) {
//授权获取用户手机
console.log(e.detail)
},
})
现象如下:
二:多选框(checkbox + checkbox-group)
checkbox组件属性:
value:checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value
disabled:是否禁用,默认为false
checked:当前是否选中,默认为false
color:checkbox的颜色,默认为#09BB07
checkbox-group组件属性:
bindchange:checkbox-group中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
例:
<!-- wxml -->
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
// 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)
}
})
现象如下:
三:form表单组件
form组件属性:
report-submit:是否返回 formId 用于发送模板消息,默认为false
report-submit-timeout:等待一段时间(毫秒数)以确认 formId 是否生效,如果失败,将返回 requestFormId:fail 开头的 formId
bindsubmit:携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}
bindreset:表单重置时会触发 reset 事件
例:
<form bindsubmit="formSubmit" bindreset="formReset">
<view>
<input name="input" placeholder="请输入" />
</view>
<view>
<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>
</view>
</form>
Page({
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
}
})
四:input组件
input属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/input.html
例:
<!--input.wxml-->
<view class="section">
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
<input password type="text" placeholder="这是一个密码输入框"/>
</view>
五:滚动选择器
1:picker选择器属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
例:
<!--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="2020-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>
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;
break;
}
console.log(data.multiIndex);
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
})
}
})
六:slider滑动选择器
slider属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
例:
<!--wxml-->
<view class="section section_gap">
<text class="section__title">显示当前value</text>
<view class="body-view">
<slider
bindchange="sliderchange" //完成一次拖动后触发的事件
show-value //显示当前数据
step="5" //步长,取值必须大于 0,并且可被(max - min)整除
min="0" //最小值
max="200"//最大值
/>
</view>
</view>
//js
Page({
sliderchange(e) {
console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
}
})
现象如下:
七:switch开关组件
switch属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
例:
<!-- wxml -->
<view class="body-view">
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>
// js
Page({
switch1Change: function (e) {
console.log('switch1 发生 change 事件,携带值为', e.detail.value)
},
switch2Change: function (e) {
console.log('switch2 发生 change 事件,携带值为', e.detail.value)
}
})
现象如下:
上一篇:微信小程序组件——导航
下一篇:微信小程序组件——基础内容