小程序的picker事件,当数据源为对象的时候
小程序的picker,更好的处理的select事件以及应对深层次的多级联动,对于单选的picker,最简单的就是选择数据和要展示的一一对象,这样我们可以直接使用;
e.detail.value获取选中的值,但更多的时候,我们选择的是一个对象,展示的是其中的一个字段,使用方式 wxml为:
<picker bindchange="bindPickerChange" value="{{index}}" range="{{subjectList}}" range-key="{{'name'}}"> <view class="picker"> {{checkedSubject}} </view> </picker>
其中subjectList为数据源,使用range-key可以更改为选项列表展示的数据,checkedSubject是我们选中以后需要展示的数据;
[{"id":1,"name":"语文"},{"id":2,"name":"数学"},{"id":3,"name":"外语"},{"id":4,"name":"物理"},{"id":5,"name":"化学"},{"id":6,"name":"政治"},{"id":7,"name":"地理"},{"id":8,"name":"历史"},{"id":9,"name":"体育"},{"id":10,"name":"音乐"},{"id":11,"name":"生物"},{"id":12,"name":"总分"},{"id":13,"name":"排名"},{"id":14,"name":"美术"},{"id":17,"name":"思想品德"}]
选中后的展示,和数据源通过index来对应起来,对应的js如下:
bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ checkedSubject: this.data.subjectList[e.detail.value].name, subjectId: this.data.subjectList[e.detail.value].id }) }