微信小程序开发文档——表单组件

本文档详细介绍了微信小程序中的表单组件,包括button、checkbox、form、input、label、picker、picker-view、radio、slider、switch和textarea等。各组件的属性如type、mode、open-type等进行了说明,帮助开发者掌握表单组件的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表单组件

  • button 按钮
  • checkbox 多项选择器,内部由多个checkbox组成。
  • form 表单,将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。
  • input 输入框
  • label 绑定的控件
  • picker 从底部弹起的滚动选择器,通过mode来区分。现支持普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
  • picker-view 嵌入页面的滚动选择器
  • radio 单项选择器,内部由多个<radio>组成。
  • slider 滑动选择器
  • switch 开关选择器
  • textarea 多行输入框

公用属性

1. button

属性名类型默认值说明生效时机最低版本
sizeStringdefault按钮的大小  
typeStringdefault按钮的样式类型  
plainBooleanfalse按钮是否镂空,背景色透明  
disabledBooleanfalse是否禁用  
loadingBooleanfalse名称前是否带 loading 图标  
form-typeString 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件  
open-typeString 微信开放能力 1.1.0
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果  
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-timeNumber20按住后多久出现点击态,单位毫秒  
hover-stay-timeNumber70手指松开后点击态保留时间,单位毫秒  
langStringen指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。open-type="getUserInfo"1.3.0
bindgetuserinfoHandler 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致open-type="getUserInfo"1.3.0
session-fromString 会话来源open-type="contact"1.4.0
send-message-titleString当前标题会话内消息卡片标题open-type="contact"1.5.0
send-message-pathString当前分享路径会话内消息卡片点击跳转小程序路径open-type="contact"1.5.0
send-message-imgString截图会话内消息卡片图片open-type="contact"1.5.0
show-message-cardBooleanfalse是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息open-type="contact"1.5.0
bindcontactHandler 客服消息回调open-type="contact"1.5.0
bindgetphonenumberHandler 获取用户手机号回调open-type="getPhoneNumber"1.2.0
app-parameterString 打开 APP 时,向 APP 传递的参数open-type="launchApp"1.9.5
binderrorHandler 当使用开放能力时,发生错误的回调open-type="launchApp"1.9.5
bindlaunchappHandler 打开 APP 成功的回调open-type="launchApp"2.4.4
bindopensettingHandler 在打开授权设置页后回调open-type="openSetting"2.0.7
aria-labelString 无障碍访问,(属性)元素的额外描述 2.5.0

type 有效值:

说明
primary绿色
default白色
warn红色

form-type 有效值:

说明
submit提交表单
reset重置表单

open-type 有效值:

说明最低版本
contact打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明1.1.0
share触发用户转发,使用前建议先阅读使用指引1.2.0
getUserInfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息1.3.0
getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明1.2.0
launchApp打开APP,可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
openSetting打开授权设置页2.0.7
feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}
<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>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
  获取用户信息
</button>
<button open-type="openSetting">打开授权设置页</button>
const types = ['default', 'primary', 'warn']
const pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading(e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}

for (let i = 0; i < types.length; ++i) {
  (function (type) {
    pageObject[type] = function (e) {
      const key = type + 'Size'
      const changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  }(types[i]))
}

Page(pageObject)

 

2. checkbox

checkbox-group

多项选择器,内部由多个checkbox组成。

属性名类型默认值说明
bindchangeEventHandle <checkbox-group>中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名类型默认值说明最低版本
valueString <checkbox>标识,选中时触发<checkbox-group>的 change 事件,并携带 <checkbox> 的 value 
disabledBooleanfalse是否禁用 
checkedBooleanfalse当前是否选中,可用来设置默认选中 
colorColor checkbox的颜色,同css的color 
aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0

3. form

属性名类型说明最低版本
report-submitBoolean是否返回 formId 用于发送模板消息 
bindsubmitEventHandle携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''} 
bindresetEventHandle表单重置时会触发 reset 事件
<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 form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>
</form>
Page({
  formSubmit(e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },
  formReset() {
    console.log('form发生了reset事件')
  }
})

 

4. input

属性名类型默认值说明最低版本
valueString 输入框的初始内容 
typeString"text"input 的类型 
passwordBooleanfalse是否是密码类型 
placeholderString 输入框为空时占位符 
placeholder-styleString 指定 placeholder 的样式 
placeholder-classString"input-placeholder"指定 placeholder 的样式类 
disabledBooleanfalse是否禁用 
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度 
cursor-spacingNumber / String0指定光标与键盘的距离,单位px(2.4.0起支持rpx)。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
auto-focusBooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘 
focusBooleanfalse获取焦点 
confirm-typeString"done"设置键盘右下角按钮的文字,仅在type='text'时生效1.1.0
confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0
cursorNumber 指定focus时的光标位置1.5.0
selection-startNumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用1.9.0
selection-endNumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用1.9.0
adjust-positionBooleantrue键盘弹起时,是否自动上推页面1.9.90
bindinputEventHandle 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 
bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 
bindblurEventHandle 输入框失去焦点时触发,event.detail = {value: value} 
bindconfirmEventHandle 点击完成按钮时触发,event.detail = {value: value} 
aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0

type 有效值:

说明
text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘

confirm-type 有效值:

说明
send右下角按钮为“发送”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”
done右下角按钮为“完成”
<!--input.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 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>
// input.js
Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput(e) {
    const value = e.detail.value
    let pos = e.detail.cursor
    if (pos != -1) {
      // 光标在中间
      const 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'),
  }
})

 

 

 5. label

属性名类型说明
forString绑定控件的 id

6. picker

属性名类型默认值说明最低版本
rangeArray / Object Array[]mode为 selector 或 multiSelector 时,range 有效 
range-keyString 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 
valueNumber0value 的值表示选择了 range 中的第几个(下标从 0 开始) 
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} 
disabledBooleanfalse是否禁用 
bindcancelEventHandle 取消选择或点遮罩层收起 picker 时触发1.9.90

多列选择器:mode = multiSelector(最低版本:1.4.0

属性名类型默认值说明最低版本
range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]] 
range-keyString 当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 
valueArray[]value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始) 
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} 
bindcolumnchangeEventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

时间选择器:mode = time

属性名类型默认值说明最低版本
valueString 表示选中的时间,格式为"hh:mm" 
startString 表示有效时间范围的开始,字符串格式为"hh:mm" 
endString 表示有效时间范围的结束,字符串格式为"hh:mm" 
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

日期选择器: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} 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

fields 有效值:

说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

省市区选择器:mode = region(最低版本:1.4.0

属性名类型默认值说明最低版本
valueArray[]表示选中的省市区,默认选中每一列的第一个值 
custom-itemString 可为每一列的顶部添加一个自定义的项1.5.0
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段code是统计用区划代码,postcode是邮政编码 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用

 

<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="2017-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(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange(e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value)
    const 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(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

 

7. picker-view

 

属性名类型说明最低版本
valueNumberArray数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。 
indicator-styleString设置选择器中间选中框的样式 
indicator-classString设置选择器中间选中框的类名1.1.0
mask-styleString设置蒙层的样式1.5.0
mask-classString设置蒙层的类名1.5.0
bindchangeEventHandle当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始) 
bindpickstartEventHandle当滚动选择开始时候触发事件2.3.1
bindpickendEventHandle当滚动选择结束时候触发事件2.3.1
aria-labelString无障碍访问,(属性)元素的额外描述2.5.0
<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view
    indicator-style="height: 50px;"
    style="width: 100%; height: 300px;"
    value="{{value}}"
    bindchange="bindChange"
  >
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years,
    year: date.getFullYear(),
    months,
    month: 2,
    days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

 

8.radio

 

属性名类型默认值说明最低版本
valueString <radio> 标识。当该<radio> 选中时,<radio-group> 的 change 事件会携带<radio>的value 
checkedBooleanfalse当前是否选中 
disabledBooleanfalse是否禁用 
colorColor radio的颜色,同css的color 
aria-labelString 无障碍访问,(属性)元素的额外描述 2.5.0 
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange(e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value)
  }
})

 

9. slider

 

属性名类型默认值说明最低版本
minNumber0最小值 
maxNumber100最大值 
stepNumber1步长,取值必须大于 0,并且可被(max - min)整除 
disabledBooleanfalse是否禁用 
valueNumber0当前取值 
colorColor#e9e9e9背景条的颜色(请使用 backgroundColor) 
selected-colorColor#1aad19已选择的颜色(请使用 activeColor) 
activeColorColor#1aad19已选择的颜色 
backgroundColorColor#e9e9e9背景条的颜色 
block-sizeNumber28滑块的大小,取值范围为 12 - 281.9.0
block-colorColor#ffffff滑块的颜色1.9.0
show-valueBooleanfalse是否显示当前 value 
bindchangeEventHandle 完成一次拖动后触发的事件,event.detail = {value: value} 
bindchangingEventHandle 拖动过程中触发的事件,event.detail = {value: value}1.7.0
aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0
<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>
const pageData = {}
for (let i = 1; i < 5; i++) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
    }
  }(i))
}
Page(pageData)

 

10. switch

 

属性名类型默认值说明最低版本
checkedBooleanfalse是否选中 
disabledBooleanfalse是否禁用 
typeStringswitch样式,有效值:switch, checkbox 
bindchangeEventHandle checked 改变时触发 change 事件,event.detail={ value:checked} 
colorColor switch 的颜色,同 css 的 color 
aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0
<view class="body-view">
  <switch checked bindchange="switch1Change" />
  <switch bindchange="switch2Change" />
</view>
Page({
  switch1Change(e) {
    console.log('switch1 发生 change 事件,携带值为', e.detail.value)
  },
  switch2Change(e) {
    console.log('switch2 发生 change 事件,携带值为', e.detail.value)
  }
})

 

11. textarea

 

属性名类型默认值说明最低版本
valueString 输入框的内容 
placeholderString 输入框为空时占位符 
placeholder-styleString 指定 placeholder 的样式,目前仅支持color,font-size和font-weight 
placeholder-classStringtextarea-placeholder指定 placeholder 的样式类 
disabledBooleanfalse是否禁用 
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度 
auto-focusBooleanfalse自动聚焦,拉起键盘。 
focusBooleanfalse获取焦点 
auto-heightBooleanfalse是否自动增高,设置auto-height时,style.height不生效 
fixedBooleanfalse如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true 
cursor-spacingNumber / String0指定光标与键盘的距离,单位px(2.4.0起支持rpx)。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
cursorNumber 指定focus时的光标位置1.5.0
show-confirm-barBooleantrue是否显示键盘上方带有”完成“按钮那一栏1.6.0
selection-startNumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用1.9.0
selection-endNumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用1.9.0
adjust-positionBooleantrue键盘弹起时,是否自动上推页面1.9.90
bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 
bindblurEventHandle 输入框失去焦点时触发,event.detail = {value, cursor} 
bindlinechangeEventHandle 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} 
bindinputEventHandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上 
bindconfirmEventHandle 点击完成时, 触发 confirm 事件,event.detail = {value: value} 
aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0
<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
  <textarea
    placeholder="placeholder颜色是红色的"
    placeholder-style="color:red;"
  />
</view>
<view class="section">
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea" />
    <button form-type="submit">提交</button>
  </form>
</view>
// textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit(e) {
    console.log(e.detail.value.textarea)
  }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值