picker组件学习总结

picker 组件是一个列表选择器视图，可以根据mode属性来设置picker 是什么类型的选择器，如：单列选择(selector)，多列选择(multiSelector)，时间(time)、日期(date)、城市选择器(region)。

属性讲解

range

相当于是组件的数据源，可以根据这个属性在 js 文件中绑定数组。
在selector单列选择器中它可以是一个一维数组，
在multiSelector多列选择器中它可以是一个二维数组，数组长度表示选择器有多少列，数组中每个嵌套的子数组表示每列的数据，
它的类型可以为字符串数组或者包含 Object 的数组。
注意只有在 mode为selector 或 multiSelector时，设置这个属性才有用。

range-key

当 range 属性为包含 Object 的数组时，就可以利用这个属性来指明是object 中的哪一个 key 的value 作为内容来显示在界面上。写法：value="key"。

value

针对selector单列选择器而言，这个 value 代表选择的是那一行，value 的值是一个数字；
multiSelector多列选择，value的值是数组类型，表示为range 从下标为0开始依次每一列中选择的哪一行的下标。还是写个代码直观写。

var array = [["key":"one"],["key":"two"],["key":"three"]]
value = [0,0, 1]
for(int i=0; i<array.length; ++i){
  var index = value[i]
  console.log(选中的值为 array[i][index])
}

多列选择示例如下

//  .wxml
<view class='section'>
  <picker  mode="multiSelector" range='{{multiArray}}' value='{{index}}' bindchange='bindchange' range-key='name'>
  多项选择{{multiArray[0][index[0]].name}},{{multiArray[1][index[1]].name}},{{multiArray[2][index[2]].name}}
  </picker>
</view>

//  .js
Page({
data:{
index2: [0,0,0],
multiArray: [
  [
    {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: '吸血虫'}
  ]]
}

bindchange: function (e) {
    console.log(e.detail)
    this.setData({
      index: e.detail["value"]
    })
  },