【微信小程序遇到的坑】使用picker组件

普通picker组件写法

js

Page({
  data: {
    jobTypeArray: ['请选择职称', '医师', '护士'],//科室类型
    jobIndex: 0,//科室类型类型id
  },
  jobPickerChange(e) {
    this.setData({
      jobIndex: e.detail.value
    })
  }
})

键值对picker组件写法

js

Page({
  data: {
     jobTypeArray: [{
      id: 0,
      name: "请选择科室"
    }, {
      id: 1,
      name: "不孕不育"
    }, {
      id: 2,
      name: "孕了也不是你的"
    }],
    jobIndex: 0,
  },
  jobPickerChange(e) {
    this.setData({
      jobIndex: e.detail.value
    })
  }
})

重点在于对wxml的写法，循环键值对数据，需要使用 range-key="{{'name'}}"

这里的参数name一定要带个引号

<picker bindchange="jobPickerChange" value="{{jobIndex}}" range="{{jobTypeArray}}" range-key="{{'name'}}">
     <view class="picker">
        {{jobTypeArray[jobIndex].name}}
     </view>
</picker>

实现效果如下

注：传参的时候，form默认提交的是选择第几个位置信息，那么想要得到对应的id信息，

需要 使用 that.data.array[that.data.arrayIndex].id 根据位置获取数据id的方式