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

概述

最近在学习微信小程序中发现，官网中对选择器picker控件的range存放的是对象数组objectArray的用法描述的不是很详细，经过一番研究对picker控件的range和range-key的用法简单坐下总结，以供参考。

picker的range和range-key的用法

这里只是对range中存放对象数组objectArray的讲解，至于range中存放数组array的情况官网API给的非常详细在这里我就不过多描述了，想了解的请参考微信小程序开发文档。

1:在js文件中定义对象数组和下标

Page({

  /**
   * 页面的初始数据
   */
  data: {
    rangekey: 0,//用于记录选择器的下标
    objectArray: [//选择器的对象数组
      {
        id: 0,
        name: '梨',
        price: 13.6

      },
      {
        id: 1,
        name: '苹果',
        price: 18.6
      },
      {
        id: 2,
        name: '火龙果',
        price: 33.6
      },
      {
        id: 3,
        name: '苹果',
        price: 6.6
      }
    ],
  },

  /**
   * 普通选择器的bindChange事件
   */
  onObjArrayPickerChange(e) {
    console.log('picker onObjArrayPickerChange发送选择改变，携带值为', e.detail.value)
    this.setData({
      rangekey: e.detail.value,//修改选中的下标
    })
  },
})

2:在wxml中指定range和range-key

  <view class="section__title">objectArray 您选中产品的价格</view>
  <picker
     mode="selector" 
     range='{{objectArray}}'  
     range-key="{{'name'}}" 
     value='{{objectArray[rangekey].value}}' 
     bindchange='onObjArrayPickerChange'>
       <view class="picker">{{objectArray[rangekey].price}}元</view>
  </picker>

重点分析：

1. range='{{objectArray}}' 指定对象数组
2. range-key="{{'name'}}" 指定 range-key，即指定使用objectArray中的 name属性来作为选择器中显示的内容，这里需要注意取出的属性外加了‘’号，即‘name’,引号不可少
3. value='{{objectArray[rangekey].value}}' ，rangekey是js中定义的对象数组的下标，objectArray[rangekey]取出的是改下标的对象，如 {id: 1,name: '苹果',price: 18.6}，而objectArray[rangekey].value中value值表示的是range-key中指定的属性，这里是name，即苹果。
4. 最终展示选中的内容{{objectArray[rangekey].price}} 元，仍然是通过数组的下标获取，只是这里取出的是对象，.price取出对象中的价格。

总结

到此相信大家都已经明白了picker的range和range-key的用法，简单总结一下picker的range中存放的是objectArray时需要通过range-key去指定选择器中显示的内容，否则通过数组下标取出的是一个object对象。