小程序学习之小程序组件（三）表单组件

1.button            按钮组件

组件的属性：

1）size属性

• default   默认值 宽度与手机屏幕宽度相同
• mini       迷你型，按钮尺寸、字号都比普通按钮小

2）type属性

• primary    绿色
• default     灰白色
• warn        红色

3）form-type属性   具体功能需配合form组件一起使用生效

• submit  提交表单
• reset      重置表单

4）open-type属性

相关属性：

2.checkbox       复选框组件，需和<checkgroup>多项选择器组件配合使用

<checkgroup>组件的属性：

<checkbox>组件的属性：

3.input               输入框组件

<input>组件属性：

1）type属性：

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

2）comfirm-type属性：(设置键盘右下角按钮文字)

• send      显示“发送”
• search   显示“搜索”
• next        “下一个”
• go            “前往”
• done        “完成”

ps：最终表现与手机输入法本身的实现有关，部分输入法可能不支持或不完全支持

4.label   改进表单组件的可用性，用for属性找到对应的id 或者将控件放在该标签下，单击时会触发对应的控件

<label>组件的属性：

 ps：目前可绑定<button>、<checkbox>、<radio>、<switch>

示例：

ps：for的优先级高于内部控件，当内部有多个控件的时候默认触发第一个控件

5.form               表单组件

<form>组件允许提交的内部表单组件值如下：

<switch>：开关选择器  <input>：输入框组件  <checkbox>：多项选择器   <slider>：滑动选择器  <radio>：单项选择器

<picker>：滚动选择器

<form>组件的属性：

6.picker             从底部弹起的滚动选择器，根据mode属性值不同共支持5种选择器

1）普通选择器  默认  mode='selector'

<picker mode='selector'>组件属性：

示例：

<!--wxml-->
<picker mode="selector" range="{{selectorItems}}" bindchange="selectorChange">
    <view>当前选择：{{selector}}</view>
</picker>

//js
data: {
    selectorItems:['苹果','香蕉','葡萄']
},
selectorChange:function(e){
    let i = e.detail.value       //获取数组下标
    let value = this.data.selectorItems[i]    //获取该下标对应项的值
    console.log(value)
    this.setData({
      selector:value
    })
}

2）多列选择器  mode="multiSelector"

<picker mode="multiSelector">组件属性

示例：

<!--wxml-->
<picker mode="multiSelector" range="{{multiselectorItems}}" bindchange="multiselectorChange">
    <view>当前选择：{{multiSelector}}</view>
</picker>

//js
 data: {
    multiselectorItems:[['罗宋汤','蘑菇汤'],['牛排','猪排','鱼排'],['冰淇淋','鸡蛋布丁']]
  },
  multiselectorChange:function(e){
   let arrayIndex = e.detail.value   //获得选项的数组下标
   let array = this.data.multiselectorItems  //获得选项数组
   let value = new Array()
   for(let i=0;i<arrayIndex.length;i++){
     let k=arrayIndex[i];  //第i个数组的元素下标
     let v=array[i][k];    //获得第i个数组的元素值
     value.push(v);
   }
    this.setData({
      multiSelector:value
    })
  }

3）时间选择器  mode="time"

<picker mode="time">组件的属性

示例：

<!--wxml-->
<picker mode="time" bindchange="timeChange">
    <view>当前选择：{{time}}</view>
</picker>

//js
timeChange:function(e){
   let value = e.detail.value    //获得选择的时间
    this.setData({
      time:value
    })
}

4）日期选择器  mode="date"

<picker mode="date">组件的属性：

fileds属性：year month day

示例：

<!--wxml-->
<picker mode="date" bindchange="dateChange">
    <view>当前选择：{{date}}</view>
</picker>

//js
dateChange:function(e){
   let value = e.detail.value    //获得选择的日期
    this.setData({
      date:value
    })
}

5）省市区选择器 mode="region"

<picker mode="region">组件的属性：

示例：

<!--wxml-->
<picker mode="region" bindchange="regionChange">
    <view>当前选择：{{region}}</view>
</picker>


//js
regionChange:function(e){
   let value = e.detail.value    //获得选择的省市区，是一个数组
    this.setData({
      region:value
    })
},

7.picker-view    嵌入页面的滚动选择器

<picker-view>组件属性：

ps：在其中要放置1~N个<pick-view-column>来表示对应列选项，<pick-view-column>仅可放置在<pick-view>中，其子节点的高度会自动设置成与<pick-view>选中框的高度一致。

示例：

<!--wxml-->
<view class="title">表单组件的简单应用</view>
<view class="demo-box">
  <view class="box-title">今日菜单</view>
  <view class="box-title">{{menu}}</view>
  <picker-view value="{{value}}" indicator-style="height:50px;" bindchange="pickerviewchange">
    <picker-view-column>
      <view class="col" wx:for="{{soup}}" wx:key="s{{index}}">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="col" wx:for="{{maincourse}}" wx:key="m{{index}}">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="col" wx:for="{{dessert}}" wx:key="d{{index}}">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>

/*wxss*/
picker-view{
  width: 100%;
  height: 300px;
}
.col{
  line-height: 50px;
}
.box-title{
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

//js
data: {
    soup:['奶油蘑菇汤','罗宋汤','牛肉清汤'],
    maincourse:['煎小牛肉卷','传统烤羊排','清煮三文鱼'],
    dessert:['坚果冰淇淋','焦糖布丁','奶酪蛋糕'],
    value:[1,1,1],    //默认每个选项的数组下标
    menu:[]
  },
  pickerviewchange:function(e){
   let v=e.detail.value;   //获取每个选项的数组下标
   let menu=[];
   menu.push(this.data.soup[v[0]]);
   console.log(menu)
   menu.push(this.data.maincourse[v[1]]);
   menu.push(this.data.dessert[v[2]]);
   console.log(menu)
   this.setData({
     menu:menu
   })
  },

8.radio               单选框组件，常与<radio-group>组件配合使用

<radio-group>组件属性：

<radio>组件属性：

9.slider              滑动条组件

<slider>组件属性：

10.switch             开关选择器

<switch>组件属性：

11.textarea        文本框组件，多行输入框

<textarea>组件属性：