微信小程序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}}"。

代码：

 
 

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     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>