因为在微信小程序的官网上并没有range-key的例子以及实际用法,所以好多人不知道具体如何使用。然后我在这里对其进行一个简单的实现,并记录一些注意事项。
以下是官网给的说明:

具体的用法:
WXML:
<picker mode="selector" value="{{index}}" range="{{objectArray}}" bindchange='bindPickerChange' range-key="{{'name'}}">
<view class="picker">
当前选择:{{objectArray[index].name}}
</view>
</picker>
JS中的数据部分:
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
]
注意事项:
1、range的值为Object Array类型,也就是上面的数据部分。
2、range-key中的值为对应数据的key,并且要加单引号。这样picker显示的内容就是name属性对应的值。
3、在当前选择的时候,要注意写完整需要的数据内容,也就是objectArray[index].name,而不能只写objectArray[index]。获取id的值:objectArray[index].id