微信小程序 的几个表单组件

1、列表选择器：picker

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

 

普通选择器：

语法：mode = selector

样式：

 

 

 

属性：

 

 

 

 

 

代码：wxml：

<view class="section">

  <view class="section__title">普通选择器</view>

  <picker  mode=”selector” bindchange="bindPickerChange" value="{ {index}}" range="{ {array}}">

    <view class="picker">

      当前选择：{ {array[index]}}

    </view>

  </picker>

</view>

Js代码：

Page({

  data: {

    array: ['美国', '中国', '巴西', '日本'],

    objectArray: [

      {

        id: 0,

        name: '美国'

      },

      {

        id: 1,

        name: '中国'

      },

      {

        id: 2,

        name: '巴西'

      },

      {

        id: 3,

        name: '日本'

      }

]，

 index: 0

 

}

 

 

绑定代码：

 bindPickerChange: function(e) {

    console.log('picker发送选择改变，携带值为', e.detail.value)

    this.setData({

      index: e.detail.value

    })

  },

 

 

 

 

 

一个对象数组要注意的地方：

1. <picker bindchange="bindPickerChange" value="{ {index}}" range="{ {objectArray}}"  <strong><span style="color:#ff0000;">range-key="{ { name}}"</span></strong>>  

2.   <view class="picker">  

3.     当前选择：{ {objectArray[index].name}}  

4.   </view>  

5. </picker> 

修改：

1. <picker bindchange="bindPickerChange" value="{ {index}}" range="{ {objectArray}}"  <span style="color:#ff0000;">range-key="{ { 'name'}}"</span>>  

2.   <view class="picker">  

3.     当前选择：{ {objectArray[index].name}}  

4.   </view>  

5. </picker>