小程序七：组件之表单组件
2024-06-18 08:43:33
button
按钮组件。
| 属性名 | 类型 | 默认值 | 说明 |
| size | String | default | 有效值default, mini |
| type | String | default | 按钮的样式类型，有效值primary, default, warn |
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带 loading 图标 |
| formType | String | 无 | 有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件 |
| hover-class | String | button-hover | 指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果 |
注：button-hover默认为{background-color:rgba(0,0,0,0.1);opacity:0.7;}
示例代码：
index.wxss:
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{background-color:blur;
}
index.wxml:
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
index.js:
var types = ['default', 'primary', 'warn']
var pageObject = {data: {defaultSize: 'default',primarySize: 'default',warnSize: 'default',disabled: false,plain: false,loading: false},setDisabled: function(e) {this.setData({disabled: !this.data.disabled})},setPlain: function(e) {this.setData({plain: !this.data.plain})},setLoading: function(e) {this.setData({loading: !this.data.loading})}
}for (var i = 0; i < types.length; ++i) {(function(type) {pageObject[type] = function(e) {var key = type + 'Size'var changedData = {}changedData[key] =this.data[key] === 'default' ? 'mini' : 'default'this.setData(changedData)}})(types[i])
}
Page(pageObject)
checkbox
[1]checkbox-group
多选项目组，内部由多个checkbox组成。
checkbox-group内只能包含checkbox
| 属性名 | 类型 | 默认值 | 说明 |
| bindchange | EventHandle | checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]} |
[2]checkbox
多选项目。
| 属性名 | 类型 | 默认值 | 说明 |
| value | String | checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的value | |
| disabled | Boolean | false | 是否禁用 |
| checked | Boolean | false | 当前是否选中，可用来设置默认选中 |
示例：
index.wxml:
<checkbox-group bindchange="checkboxChange"><label class="checkbox" wx:for-items="{{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)}
})
form
将表单内的用户输入的switch input checkbox slider radio picker 提交
| 属性名 | 类型 | 说明 |
| report-submit | Boolean | 是否返回formId用于发送模板消息 |
| bindsubmit | EventHandle | 携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" } |
| bindreset | EventHandle | 表单重置时会触发reset事件 |
示例代码：
index.wxml:
<form bindsubmit="formSubmit" bindreset="formReset"><view class="section section_gap"><view class="section__title">switch</view><switch name="switch"/></view><view class="section section_gap"><view class="section__title">slider</view><slider name="slider" show-value ></slider></view><view class="section"><view class="section__title">input</view><input name="input" placeholder="please input here" /></view><view class="section section_gap"><view class="section__title">radio</view><radio-group name="radio-group"><label><radio value="radio1"/>radio1</label><label><radio value="radio2"/>radio2</label></radio-group></view><view class="section section_gap"><view class="section__title">checkbox</view><checkbox-group name="checkbox"><label><checkbox value="checkbox1"/>checkbox1</label><label><checkbox value="checkbox2"/>checkbox2</label></checkbox-group></view><view class="btn-area"><button formType="submit">Submit</button><button formType="reset">Reset</button></view>
</form>
index.js:
Page({formSubmit: function(e) {console.log('form发生了submit事件，携带数据为：', e.detail.value)},formReset: function() {console.log('form发生了reset事件')}
})
input
| 属性名 | 类型 | 默认值 | 说明 |
| value | String | 输入框的内容 | |
| type | String | text | input的类型，有效值：text,number,idcard,digit,time,date |
| password | Boolean | false | 是否是密码类型 |
| placeholder | String | 输入框为空时占位符 | |
| placeholder-style | String | 指定placeholder的样式 | |
| placeholder-class | String | input-placeholder | 指定placeholder的样式类 |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大输入长度，设置为0的时候不限制最大长度 |
| auto-focus | Boolean | false | 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性 |
| focus | Boolean | false | 使得input获取焦点 |
| bindchange | EventHandle | 输入框失去焦点时，触发bindchange事件，event.detail={value:value} | |
| bindinput | EventHandle | 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。 | |
| bindfocus | EventHandle | 输入框聚焦时触发，event.detail = {value:value} | |
| bindblur | EventHandle | 输入框失去焦点时触发，event.detail = {value:value} |
示例代码：
index.wxml:
<view class="section"><input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section"><input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /><view class="btn-area"><button bindtap="bindButtonTap">使得输入框获取焦点</button></view>
</view>
<view class="section"><input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section"><view class="section__title">你输入的是：{{inputValue}}</view><input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section"><input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section"><input bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section"><input type="emoji" placeholder="这是一个带有表情的输入框" />
</view>
<view class="section"><input password type="number" />
</view>
<view class="section"><input password type="text" />
</view>
<view class="section"><input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section"><input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section"><input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
index.js:
Page({data:{focus:false,inputValue:""},bindButtonTap:function(){this.setData({focus:Date.now()})},bindKeyInput:function(e){this.setData({inputValue:e.detail.value})},bindReplaceInput:function(e){var value = e.detail.value;var pos = e.detail.cursor;if(pos != -1){//光标在中间var left = e.detail.value.slice(0,pos);//计算光标的位置pos = left.replace(/11/g,'2').length;}//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置return {value:value.replace(/11/g,'2'),cursor:pos}//或者直接返回字符串,光标在最后边//return value.replace(/11/g,'2'),},bindHideKeyboard:function(e){if(e.detail.value === "123"){//收起键盘wx.hideKeyboard();}}
})
label
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：button, checkbox, radio, switch。
| 属性名 | 类型 | 说明 |
| for | String | 绑定控件的id |
示例代码：
index.wxml:
<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange"><view class="label-1" wx:for-items="{{checkboxItems}}"><label><checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox><view class="label-1__icon"><view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view></view><text class="label-1__text">{{item.value}}</text></label></view>
</checkbox-group>
</view><view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange"><view class="label-2" wx:for-items="{{radioItems}}"><radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio><view class="label-2__icon"><view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view></view><label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label></view>
</radio-group>
</view><view class="section section_gap">
<view class="section__title">绑定button</view>
<label class="label-3"><text>点击这段文字，button会被选中</text>
</label>
<view class="btn-area"><button type="default" name="1" bindtap="tapEvent">按钮</button>
</view>
</view><view class="section section_gap">
<view class="section__title">label内有多个时选中第一个</view>
<label class="label-4"><checkbox> 选中我 </checkbox><checkbox> 选不中 </checkbox><checkbox> 选不中 </checkbox><checkbox> 选不中 </checkbox><view class="label-4_text">点我会选中第一个</view>
</label>
</view>
index.js:
Page({data: {checkboxItems: [{name: 'USA', value: '美国'},{name: 'CHN', value: '中国', checked: 'true'},{name: 'BRA', value: '巴西'},{name: 'JPN', value: '日本', checked: 'true'},{name: 'ENG', value: '英国'},{name: 'TUR', value: '法国'},],radioItems: [{name: 'USA', value: '美国'},{name: 'CHN', value: '中国', checked: 'true'},{name: 'BRA', value: '巴西'},{name: 'JPN', value: '日本'},{name: 'ENG', value: '英国'},{name: 'TUR', value: '法国'},],hidden: false},checkboxChange: function(e) {var checked = e.detail.valuevar changed = {}for (var i = 0; i < this.data.checkboxItems.length; i ++) {if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {changed['checkboxItems['+i+'].checked'] = true} else {changed['checkboxItems['+i+'].checked'] = false}}this.setData(changed)},radioChange: function(e) {var checked = e.detail.valuevar changed = {}for (var i = 0; i < this.data.radioItems.length; i ++) {if (checked.indexOf(this.data.radioItems[i].name) !== -1) {changed['radioItems['+i+'].checked'] = true} else {changed['radioItems['+i+'].checked'] = false}}this.setData(changed)}
})
index.wxss:
.label-1, .label-2{margin-bottom: 15px;
}
.label-1__text, .label-2__text {display: inline-block;vertical-align: middle;
}.label-1__icon {position: relative;margin-right: 10px;display: inline-block;vertical-align: middle;width: 18px;height: 18px;background: #fcfff4;
}.label-1__icon-checked {position: absolute;top: 3px;left: 3px;width: 12px;height: 12px;background: #1aad19;
}.label-2__icon {position: relative;display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background: #fcfff4;border-radius: 50px;
}.label-2__icon-checked {position: absolute;left: 3px;top: 3px;width: 12px;height: 12px;background: #1aad19;border-radius: 50%;
}.label-4_text{text-align: center;margin-top: 15px;
}
picker
滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器
普通选择器：mode=selector
| 属性名 | 类型 | 默认值 | 说明 |
| range | Array | [] | mode为selector时，range有效 |
| value | Number | 0 | mode为selector时，是数字，表示选择了range中的第几个，从0开始。 |
| bindchange | EventHandle | value改变时触发change事件，event.detail= { value:value} |
时间选择器：mode=time
| 属性名 | 类型 | 默认值 | 说明 |
| value | String | 表示选中的时间，格式为"hh:mm" | |
| String | 表示有效时间范围的开始，字符串格式为"hh:mm" | ||
| String | 表示有效时间范围的结束，字符串格式为"hh:mm" | ||
| EventHandle | value改变时触发change事件，event.detail= { value:value} |
日期选择器：mode=date
| 属性名 | 类型 | 默认值 | 说明 |
| value | String | 0 | 表示选中的日期，格式为"yyyy-MM-dd" |
| start | String | 表示有效日期范围的开始，字符串格式为"yyyy-MM-dd" | |
| end | String | 表示有效日期范围的结束，字符串格式为"yyyy-MM-dd" | |
| fields | String | day | 有效值year,month,day，表示选择器的粒度 |
| bindchange | EventHandle | value改变时触发change事件，event.detail= { value:value} |
示例代码：
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="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>
index.js:
Page({data: {array:["美国","中国","巴西","日本"],index:0,date:"2016-09-01",time:"12:01"},bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},bindDateChange:function(e){this.setData({date:e.detail.value})},bindTimeChange:function(e){this.setData({time:e.detail.time})}
})
radio
[1]radio-group
单选项目组，内部由多个radio组成
| 属性名 | 类型 | 默认值 | 说明 |
| bindchange | EventHandle | radio-group中的选中项发生变化时触发change事件，event.detai = {value : 选中项radio的value |
[2]radio
单选项目
| 属性名 | 类型 | 默认值 | 说明 |
| value | String | radio标识。当该radio选中时，radio-group的change事件会携带radio的value | |
| checked | Boolean | false | 当前是否选中 |
| disabled | Boolean | false | 是否禁用 |
index.wxml:
<radio-group class="radio-group" bindchange="radioChange"><label class="radio" wx:for-items="{{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)}
})
slider
滑动选择器
| 属性名 | 类型 | 默认值 | 说明 |
| min | Number | 0 | 最小值 |
| max | Number | 100 | 最大值 |
| step | Number | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除 |
| disabled | Boolean | false | 是否禁用 |
| value | Number | 0 | 当前取值 |
| show-value | Boolean | false | 是否显示当前value |
| bindchange | EventHandle | 完成一次拖动后触发的事件，event.detail = {value:value} |
示例代码：
index.wxml:
<view class="section section_gap"><text class="section__title">设置left/right icon</text><view class="body-view"><slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/></view>
</view><view class="section section_gap"><text class="section__title">设置step</text><view class="body-view"><slider bindchange="slider2change" step="5"/></view>
</view><view class="section section_gap"><text class="section__title">显示当前value</text><view class="body-view"><slider bindchange="slider3change" show-value/></view>
</view><view class="section section_gap"><text class="section__title">设置最小/最大值</text><view class="body-view"><slider bindchange="slider4change" min="50" max="200" show-value/></view>
</view>
index.js:
var pageData = {}
for(var i = 1; i < 5; ++i) {(function (index) {pageData[`slider${index}change`] = function(e) {console.log(`slider${index}发生change事件，携带值为`, e.detail.value)}})(i);
}
Page(pageData)
switch
开关组件
| 属性名 | 类型 | 默认值 | 说明 |
| checked | Boolean | false | 是否选中 |
| disabled | Boolean | false | 是否禁用 |
| type | String | switch | 样式，有效值：switch, checkbox |
| bindchange | EventHandle | checked改变时触发change事件，event.detail={ value:checked} |
index.wxml:
<view class="section section_gap"><view class="section__title">type="switch"</view><view class="body-view"><switch checked="{{switch1Checked}}" bindchange="switch1Change"/></view>
</view><view class="section section_gap"><view class="section__title">type="checkbox"</view><view class="body-view"><switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/></view>
</view>
index.js:
var pageData = {data: {switch1Checked: true,switch2Checked: false,switch1Style: '',switch2Style: 'text-decoration: line-through'}
}
for(var i = 1; i <= 2; ++i) {(function(index) {pageData[`switch${index}Change`] = function(e) {console.log(`switch${index}发生change事件，携带值为`, e.detail.value)var obj = {}obj[`switch${index}Checked`] = e.detail.valuethis.setData(obj)obj = {}obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'this.setData(obj)}})(i)
}
Page(pageData)
小程序七：组件之表单组件相关推荐
- 【小程序】vant weapp表单组件value非响应表单校验
解决办法: 给van-field添加:bind:input.bind:change.bind:blur解决,前两者都是实时监听,最后一个只在失去焦点时触发,考虑到性能问题,使用bind:blur,通过 ...
- uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息 本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
- 微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
- 在微信小程序中提交form表单
怎么在微信小程序中提交form表单 发布时间:2021-04-07 16:26:31 来源:亿速云 阅读:1229 作者:Leah 栏目:web开发 活动:亿速云新用户活动,各类服务器大降价,满足绝大 ...
- 使用 javaScript 编写倒计时小程序，到时提交表单
使用 javaScript 编写倒计时小程序,到时提交表单 <script type="text/javascript">var countdown = 10; // ...
- Uniapp微信小程序实现简易生成表单生成器
在开发一些填报小程序,一些小型办公小程序的时候,难免会遇到较多的需要填写的表单信息,纯手撸表单耗时耗力. TIP:类似于这种十种类型的表单,每种类型的表单并不一样 下面将分为三个部分 一.创建对应类型 ...
- 微信小程序中使用form表单
首先,我同事说微信小程序中不能使用form.what?他妈的逗我呢.那么多数据一个一个的赋值不麻烦么?怎么可能.只是自作做一下了.看了一下文档,就有form的组件,也给了案例.心中千万个..... 不 ...
- 微信小程序实现调查问卷表单
微信小程序问卷调查表单 功能演示: 20220408_202155 index.wxml <view id="container-top"> <view id=& ...
- uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
最新文章
- PowerDesigner 连接MySQL数据库详细步骤
- SCVMM 2008 R2 SP1 快速修改动态内存
- oracle之 11g RAC R2 体系结构---Grid
- 互联网金融投放获客优化的讨论（新用户引导流程）
- [IE9] GPU硬件加速到底是实用创新还是噱头
- 【NOIP2014】子矩阵
- Dubbo源码分析：ThreadPool
- 入职必备两小时入门SVN（一）
- rstudio和matlab,R语言与matlab循环时间对比
- ADO数据库常用操作
- C语言pop_back用法,【C语言】单链表的所有操作的实现（包括PopBack、PushBack、PopFront、PushFront、Insert）...
- 【爷青回系列】使用VMware虚拟机安装Windows XP系统！最详细！
- fanuc服务器显示6,1.13 FANUC如何向系统输入输入程序
- 看完左耳朵耗子的116篇文章，我给自己定了个5年技术规划
- 【无人机系统】四轴飞行器及其UAV飞控系统 - 桂林电子科技大学信息科技学院 电子工程系（四 五 ）
- js中this指向学习总结
- 如何练成某一领域的高手
- php模拟登录QQ空间3.0 2014-11-23
- 蓝桥杯2016年JavaB组省赛（代码+解析）
- 前端图片渲染性能优化与实践 — 图片懒加载