小程序七：组件之表单组件-白红宇

小程序七：组件之表单组件

阅读量：6071 次

发布时间：2019-06-20

本文共 14218 字，大约阅读时间需要 47 分钟。

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默认为{opacity:0.7;}

示例代码：

index.wxss:

/** wxss **/  /** 修改button默认的点击态样式类**/  .button-hover{
           background-color:red;  }  /** 添加自定义button点击态样式类**/  .other-button-hover{
           background-color:blur;  }

index.wxml:

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:


               
                    
           {
        {item.value}}

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:

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:


               
            
           
               
                
                    
                 
            
           
               
            
           
               
          
           你输入的是：{
       {inputValue}}

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:


           
          
           表单组件在label内
            
                
                     
                          
                           
                               
                            
                           
             
              {
       {item.value}}
                             
             
            
             
           
          
           label用for标识表单组件
            
                
                     
                      
                          
                       
                      
            
             
              {
       {item.name}}
                   
             
            
             
           
          
           绑定button
            
                
           
            点击这段文字，button会被选中
               
                
             
            
             
           
          
           label内有多个时选中第一个
            
                
           
             选中我 
                 
           
             选不中 
                 
           
             选不中 
                 
           
             选不中 
                 
           
            点我会选中第一个

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

属性名	类型	默认值	说明
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:


               
          
           地区选择器
                
                    
           
                          当前选择：{
        {array[index]}}          
                 
            
           
               
          
           时间选择器
                
                    
           
                          当前选择: {
        {time}}          
                 
            
             
               
          
           日期选择器
                
                    
           
                          当前选择: {
        {date}}

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:


               
                    
           {
        {item.value}}

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:


               
          
           设置left/right icon
                
                    
                 
            
             
               
          
           设置step
                
                    
                 
            
             
               
          
           显示当前value
                
                    
                 
            
             
               
          
           设置最小/最大值

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:


               
          
           type="switch"
                
                    
                 
            
             
               
          
           type="checkbox"

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)