表单组件

button:按钮(按钮怎么不能设置image呢)

type:按钮的样式类型(有三个可选值),其实可以根据background-color来达到效果

open-type:微信开放能力(微信添加了一些自己的功能在按钮上,属于绑定关系),值是固定的

<button open-type="contact" loading='true' >进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<button open-type="openSetting">打开授权设置页</button>

lang:指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文(在事件的detail信息里)

check-box:多项选择器

它实际上是只是checkbox-group里的一个单元

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

checked:当前是否选中，可用来设置默认选中(这里可在data中设置数据源的时候给默认选中)

form:表单

将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

其实就是一个封装的视图集合体,并通过字典的形式保存各个视图的值(detail.value获取)

注意,每个需要提交数据的视图,必须加上name作为key,并且必须配合button去使用,button的formType可选值为submit,reset,对应form的两个绑定时间bindsubmit,bindreset

<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="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

input:输入框

这个控件是我学的最强大的控件(至少比ios),下面介绍(ios有的暂不介绍)

confirm-type:设置键盘右下角按钮的文字(好吧,还是只有几个特定值,样式不可修改)

selection-start,selection-end:光标位置，自动聚集时有效，互相搭配使用,很人性化

adjust-position:键盘弹起时，是否自动上推页面(连界面的适配都考虑了)

label

这个空间和iOS中的大不相同,它并不是单纯的显示文本控件,它可以将其他空间绑定,点击label,就会触发绑定在其下的控件,改进了表单组件的可用性,目前可绑定的组件有button,checkbox,radio,switch

例如

<checkbox-group bindchange='checkboxChange' wx:for='{{["123","er","3","ghgh"]}}'>
<!-- <label wx:for='{{["123","er","3","ghgh"]}}'> -->
<checkbox value='{{item}}' checked='{{item.checked}}'></checkbox>{{item}}
<!-- </label> -->
</checkbox-group>

如果,checkbox不与label绑定,点击字体,checkbox并不会选中

picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器

其实是给出3中特定的选中器和2种自定义选择器

实验一下自定义选中器

<view>自定义选择器</view>
<picker mode='multiSelector' range='{{citys}}' bindcolumnchange='columnChange' bindchange='pickChange'>
<view>
 选择器:
</view>
</picker>

columnChange:function(e){
    console.log(e)
    if(e.detail.column == 0){
      this.setData({
        citys: [[
          "中国",
          "美国",
        ], this.data.list[e.detail.value]]
      })
    }
  }

需要注意的是自定义选择器是几列选择器数据就是几维数组,但如果是选择了左侧数据,右侧数据随之改变,只能去动态修改,单独设定右侧数据列表