18. 表单组件

button

按钮

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

lang 的合法值

例子

<button loading>按钮1</button>
<button size="default" type="primary">按钮2</button>
<button size="mini" type="warn">按钮3</button>

tips

1. button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

2. bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。

3. 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

4. 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。

5. 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效。

checkbox

多选组件

例子

wxml

<checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for-items="{{items}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
</checkbox-group>

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)
  }
})

radio

单选组件

例子

wxml

<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>

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)
  }
})

switch

开关选择器

例子

wxml

<view class="body-view">
    <switch checked bindchange="switchChange"/>
</view>

js

Page({
  switchChange: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  }
})

input

输入框。该组件是原生组件，使用时请注意相关限制

type 的合法值

confirm-type 的合法值

提示：

1. confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持
2. input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family
3. 在 input 聚焦期间，避免使用 css 动画
4. 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field
5. 键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
6. 微信版本 6.3.30, focus 属性设置无效
7. 微信版本 6.3.30, placeholder 在聚焦时出现重影问题

例子

wxml

<view class="body-view">
    <input type="text" value="{{value}}" bindinput='setValue'/>
    <button bindtap="tap">获取input的值</button>
</view>

js

Page({
  data: {
    value: 123
  },
  setValue(e) {
    this.setData({
      value: e.detail.value
    })
  },
  tap() {
    console.log(this.data.value)
  }
})

textarea

多行输入框。该组件是原生组件，使用时请注意相关限制。

confirm-type 的合法值

# Bug & Tip

1. tip: textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
2. tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
3. tip : 键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
4. bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。

例子

wxml

<view class="body-view">
    <textarea value="{{value}}" bindinput='setValue'/>
    <button bindtap="tap">获取textarea的值</button>
</view>

js

Page({
  data: {
    value: 123
  },
  setValue(e) {
    this.setData({
      value: e.detail.value
    })
  },
  tap() {
    console.log(this.data.value)
  }
})