微信小程序picker的range和range-key的用法注意

通常，我们在获取后台的数据字典要显示在页面的picker中，如上图所示，

但后台传过来的参数是以数组格式传过来的数据，里面是多项json结构的数据，

在picker中显示的只是每项json结构数据中的某一项，但需要给后台传的数据却是另一项，

例如：后台给我的数据是myAnnual这个数组，我在picker上显示的是每一项数据里面的label这项，但要给后台传的参数却是value这一项。

这时候，就要用到range和range-key这两个参数。

range是你要显示的数组，range-key是数组中你要显示的那一项，也就是图示里面的label，值得注意的是range="{{myAnnual}}"

range-key="{{'label'}}" ，range-key中的数据要加引号！！！！！才生效！

在页面的data中默认显示选择的下标，

在picker中显示的时候 {{myAnnual[isAnnual].label}}，

在获取数据的时候，使用 value="{{myMarital[isAnnual].value}}"。

扫描二维码关注公众号，回复： 6230888 查看本文章

代码：

 
Page({
  data: {
  
    isAnnual: 0, //收入状况默认选择的下标

  },




//选择收入
  bindPicker1ChangemyAnnual: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      isAnnual: e.detail.value
    })
  },


//wxss里面

    <view class="relation">
      <view class="nameView">
        <text class="tx1">收入状况</text>
      </view>

      <view class="nameViewright">
        <view class="image2">
          <image class="image-2" src="../../image/enter.png"></image>
        </view>
        <picker mode='selector' bindchange="bindPicker1ChangemyAnnual" value="{{myMarital[isAnnual].value}}" range-key="{{'label'}}" range="{{myAnnual}}">
          <view class="txname">
            {{myAnnual[isAnnual].label}}
          </view>
        </picker>

      </view>
    </view>