微信小程序開發----Picker中range屬性及其他的理解

微信小程序開發文檔中針對picker做了詳細的解釋，但根據筆者的使用，發現了一個好玩的地方。

先針對picker  普通選擇器：mode = selector  這個模式說下屬性吧

上圖是微信小程序官方文檔的說明，以下是我的自己理解：

range屬性，類型為array或者object Array，他的作用只是讓你當前使用的picker指明調用哪一個數據，如下，我有兩個數組的數據

deviceTypeList:["請選擇類型","類型一","類型二","類型三"],
    deviceArrayList:[
      { id: 0, name:"請選擇類型"},
      { id: 1, name:"類型一"},
      { id: 2, name:"類型二"},
      { id: 3, name:"類型三"}
    ],
 

當使用微信小程序開發文檔的range為array時，實例如下所示

<picker bindchange="bindDeviceTypeChange" value="{{deviceType}}" range="{{deviceTypeList}}">
        <label class="label">類型</label><text class='inputText'>{{deviceTypeList[deviceType]}}</text>
      </picker>
 調用的數組數據 deviceTypeList:["請選擇類型","類型一","類型二","類型三"]

此時的picker-value值為數組中你所選擇數據的下標值(數組下標從0開始)；當然有人會問value屬性中配置的是什么，那是js文件中點擊picker標簽后，保存的全局下標值。

 

若出現你需要從服務器獲取數據信息，但不是根據數組數據的下標取得，而是必須按照服務器給定的id屬性獲取對應的值，此時你需要使用range屬性為Object Array的，Object Array不是指你需要寫range=“Object Array”，他的意思是使用range屬性指明wxjs文件中所定義的一個數組信息。此時案例如下所示：

<picker bindchange="bindDeviceTypeChange" value="{{deviceType}}" range="{{deviceArrayList}}" range-key="name">
        <label class="label">類型</label><text class='inputText'>{{deviceArrayList[deviceType].name}}</text>
      </picker>
 
使用到的數組值為：
deviceArrayList:[
      { id: 0, name:"請選擇類型"},
      { id: 1, name:"類型一"},
      { id: 2, name:"類型二"},
      { id: 3, name:"類型三"}
    ]

value中的屬性值為點擊選中picker標簽中的某條數據后，全局保存的數組的id值。

 

因為在我自身定義的數據結構中采用每個對象只有兩條屬性，分別是id和name，當我點擊picker標簽，需要顯示name值，所以必須添加range-key="name"，此時的name為定義數組中的某個key值信息。如果你的range-key=“”中出現了數組中不存在key信息，當你點擊picker標簽后，顯示的全部是"undefind"。

針對如何取得對象數組中指定的id值。

<view class='inputView'>
      <picker bindchange="bindDoorChange" value="{{checkedDoorVal}}" range="{{pickerCheckArrayList}}" range-key="value">
        <label class="label">門磁報警</label>
        <text class='pickerText'>{{pickerCheckArrayList[checkedDoorVal].value}}</text>
      </picker>
    </view>
 
對應的對象數組：
pickerCheckArrayList:[
      {id:5,value:"關"},
      {id:1,value:"開"}
    ],

上面的例子，我額外給出第一個數據下標為0，但id值為5的數據，那如何取得那個5呢？

全局data中需要保存兩個變量，一個是當前picker的下標值變量名，一個是選中的id值。使用picker標簽的綁定監聽事件，獲取選中的下標，再根據下標值獲取對應的數組對象中的id屬性。

//門磁報警數據變動監聽
  bindDoorChange:function(e){
    console.log("門磁告警選擇的數據值：" + e.detail.value);
    //獲取對象數組中的id值
    console.log("##  " + this.data.pickerCheckArrayList[e.detail.value].id)
    this.setData({
      checkedDoorVal: e.detail.value 
    });
  },