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

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

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

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

例如：后台给我的数据是 position_array这个数组，我在picker上显示的是每一项数组里面的position这个数据

但要给后台传的参数却是value这一项。

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

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

range-key="{{‘position’}}" ，range-key中的数据要加引号也就是position！！！！！
才生效！

（在页面的data中默认显示选择的下标，
在picker中显示的时候 {{position_array[hx_index].position}} ）
如果range-key="{{‘position’}}"，没有加引号，那数据就不会显示出来
只会显示一个object

在获取数据的时候，使用 value="{{pic_array[hx_index].value}}",不用value也行,亲测过,
只要有 range="{{position_array}}" 和 range-key="{{‘position’}}" 数据一样出来,具体
情况自行查找。

不多说,下面粘代码,本文只有前端代码,后端代码,就是查询一个对象以集合的方式返回前端

js页面
Page({

   /**
    * 页面的初始数据
    */
  // 复制代码
  data:{
   //户型   这是一个本地的对象，然后绑定到页面上
   position_array: [],
  hx_index: 0
 },
   bindPickerChange_hx: function (e) {
   console.log('picker发送选择改变，携带值为', e.detail.value);
   this.setData({   //给变量赋值
   hx_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
  })
   console.log('自定义值:', this.data.hx_select);
  },
      onLoad: function () {
         var that = this;
         wx.request({
            url: "http://localhost:443/selectDepartment",  //后台要传参的路径
            data: {
            a: ""  //参数
            },
            header: {
            "Content-Type": "applicatiSon/x-www-form-urlencoded"
            },
            method: "get",
            success: function (res) {
               var hx=res.data
            that.setData({
               position_array: hx //把json数据赋值给变量pic_array_hx
      }) 
      } 
   })
},  
})

wxml页面
 <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].pId}}" 
 data-selecthx="{{pic_array[hx_index].position}}" range="{{position_array}}" range-key="{{'position'}}"  
 bindchange="bindPickerChange_hx"  >
        <view class="picker" >
         部门:  {{position_array[hx_index].position}} 
        </view>
      </picker>