首页 > 代码库 > 小程序七：组件之表单组件

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

2024-08-23 23:37:13   221人阅读

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:

<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 =http://www.mamicode.com/ {}  
      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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/=="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.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:
<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 =http://www.mamicode.com/ {}  
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 =http://www.mamicode.com/ {  
  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)

 

 

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


联系
我们