小程序七：组件之表单组件
来源：互联网 发布：我做淘宝在哪找货源 编辑：程序博客网 时间：2024/04/30 12:34
button
按钮组件。
属性名类型默认值说明sizeStringdefault有效值default, minitypeStringdefault按钮的样式类型，有效值primary, default, warnplainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标formTypeString无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件hover-classStringbutton-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
属性名类型默认值说明bindchangeEventHandle checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]}
[2]checkbox
多选项目。
属性名类型默认值说明valueString checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的valuedisabledBooleanfalse是否禁用checkedBooleanfalse当前是否选中，可用来设置默认选中
示例：
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-submitBoolean是否返回formId用于发送模板消息bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }bindresetEventHandle表单重置时会触发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
属性名类型默认值说明valueString 输入框的内容typeStringtextinput的类型，有效值：text,number,idcard,digit,time,datepasswordBooleanfalse是否是密码类型placeholderString 输入框为空时占位符placeholder-styleString 指定placeholder的样式placeholder-classStringinput-placeholder指定placeholder的样式类disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性focusBooleanfalse使得input获取焦点bindchangeEventHandle 输入框失去焦点时，触发bindchange事件，event.detail={value:value}bindinputEventHandle 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。bindfocusEventHandle 输入框聚焦时触发，event.detail = {value:value}bindblurEventHandle 输入框失去焦点时触发，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。
属性名类型说明forString绑定控件的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.value var 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.value var 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
属性名类型默认值说明rangeArray[]mode为selector时，range有效valueNumber0mode为selector时，是数字，表示选择了range中的第几个，从0开始。bindchangeEventHandle value改变时触发change事件，event.detail= { value:value}
时间选择器：mode=time
属性名类型默认值说明valueString 表示选中的时间，格式为"hh:mm" String 表示有效时间范围的开始，字符串格式为"hh:mm" String 表示有效时间范围的结束，字符串格式为"hh:mm" EventHandle value改变时触发change事件，event.detail= { value:value}
日期选择器：mode=date
属性名类型默认值说明valueString0表示选中的日期，格式为"yyyy-MM-dd"startString 表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"endString 表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"fieldsStringday有效值year,month,day，表示选择器的粒度bindchangeEventHandle 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组成
属性名类型默认值说明bindchangeEventHandle radio-group中的选中项发生变化时触发change事件，event.detai = {value : 选中项radio的value
[2]radio
单选项目
属性名类型默认值说明valueString radio标识。当该radio选中时，radio-group的change事件会携带radio的valuecheckedBooleanfalse当前是否选中disabledBooleanfalse是否禁用
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
滑动选择器
属性名类型默认值说明minNumber0最小值maxNumber100最大值stepNumber1步长，取值必须大于 0，并且可被 (max - min) 整除disabledBooleanfalse是否禁用valueNumber0当前取值show-valueBooleanfalse是否显示当前valuebindchangeEventHandle 完成一次拖动后触发的事件，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
开关组件
属性名类型默认值说明checkedBooleanfalse是否选中disabledBooleanfalse是否禁用typeStringswitch样式，有效值：switch, checkboxbindchangeEventHandle 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.value this.setData(obj) obj = {} obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through' this.setData(obj) } })(i)}Page(pageData)
0 0
- 小程序七：组件之表单组件
- 用微信小程序开店之七——小程序组件3：“表单”（1）
- 用微信小程序开店之八——小程序组件4：“表单”（2）
- 用微信小程序开店之九——小程序组件5：“表单”（3）
- 小程序五：组件之视图容器
- 小程序六：组件之基础内容
- 小程序文档整理之 -- 组件
- 小程序 组件
- 小程序组件实现
- 小程序 基础组件
- 微信小程序 3----表单组件
- 微信小程序学习（七）之button组件
- 小程序基础组件与导航组件
- jQuery Mobile 组件 之 表单
- CSS界面组件之表单
- 小程序十：媒体组件
- 小程序组件居中问题
- 小程序组件开发坑
- CentOS7下安装MySQL
- Python 多进程使用中的一些记录
- Java 8 中的 Streams API 详解
- 大数据之数据结构例析（一）
- jmeter中mail reader sampler邮件层级多，正则表达式提取器（regular expression extror）无法提取，使用BeanShellPostProcessor解决
- 小程序七：组件之表单组件
- mysql数据库权限（下）
- 图像处理库 libpng
- 第一个Java程式
- JDOM方式解析、创建XML文件（实例）
- android 去掉系统自带的跳转activity的动画
- S29GL128P norflash 读写擦除问题
- Unity3d 屏幕特效实现类似死亡之后的全屏黑白效果
- shell脚本学习笔记（四） —— expr、basename、shift
