小程序組件之picker和range-key的用法

    因為在微信小程序的官網上並沒有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