微信小程序picker的range和range-key的用法
概述picker的range和range-key的用法1:在js文件中定义对象数组和下标2:在wxml中指定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>
重点分析：
range='{{objectArray}}' 指定对象数组range-key="{{'name'}}" 指定 range-key，即指定使用objectArray中的 name属性来作为选择器中显示的内容，这里需要注意取出的属性外加了‘’号，即‘name’,引号不可少value='{{objectArray[rangekey].value}}' ，rangekey是js中定义的对象数组的下标，objectArray[rangekey]取出的是改下标的对象，如 {id: 1,name: '苹果',price: 18.6}，而objectArray[rangekey].value中value值表示的是range-key中指定的属性，这里是name，即苹果。最终展示选中的内容{{objectArray[rangekey].price}} 元，仍然是通过数组的下标获取，只是这里取出的是对象，.price取出对象中的价格。
总结
到此相信大家都已经明白了picker的range和range-key的用法，简单总结一下picker的range中存放的是objectArray时需要通过range-key去指定选择器中显示的内容，否则通过数组下标取出的是一个object对象。
