普通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的方式