微信小程序picker的坑

js文件：

 Companyarr: [{
      id: '公司id1',
      companyname: "公司1的名字"
    }, {
      id: '公司id2',
      companyname: "公司2的名字"
    }],

  Companyindex: 0,

wxml文件：

<form bindsubmit='bindformSubmit'>

  <text class="input-item-label">所屬公司</text>
  <picker name='UserCompany' class="input-item-content" bindchange="bindPickerChange" data-pickername="UserCompany" value="{{Companyindex}}" range-key='{{"companyname"}}' range="{{Companyarr}}" mode="selector">{{Companyarr[Companyindex].companyname}}
  </picker>
  <button class="btn-block btn-orange" formType="submit">申請認證</button>

</form>

 

1.當range是ObjectArray時，range-key的作用是通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容。此時rang-key注意：大括號里面一定要加引號，也可以用range-key='companyname' 這種形式。

PS：rang-key就是指定在頁面上要顯示對象數組中那個屬性的值，和后面的{{Companyarr[Companyindex].companyname}}對應

2.關於value值得問題

   官方文檔：

解釋value是數組的索引，按照上面的寫法(正確的寫法就是這種)，當我們提交表單，通過e.detail得到的表單的值，UserCompany對應的值就是你所選項的數組索引值，在大多數情況下，這並不是我們想要的，我們一般要得到的是對象數組中某個屬性的值，當然通過索引，也可以在獲得到我們想要的值，但是能不能在提交表單的時候，直接獲得我們想要的值呢，答案是可以的(但是會有一些問題)，上述例子中比如我們要得到的是id，那么我們直接給value綁定{{Companyarr[Companyindex].id}}，這樣通過e.detail我們獲取UserCompany值就是我們想要的id值。如果我們只是一次性操作，之后也不會對信息進行更改這樣是沒用任何問題的，但是我想一般情況下應該不會是這樣，當我們選擇之后要重新選擇，或者表單提交之后，要修改信息進行重新選擇，那么你會發現bug了，就是當點擊出現選項后，你會發現選項中默認選中的不是我們當前選擇的這個，比如我們原來選擇的是“公司2的名字”，跳出的選項默認選擇還是“公司1的名字”，這就是沒有指定選項索引的原因。如果按照正確的寫法，頁面加載時我們會給picker的value找到正確的索引值，進行賦值操作，這樣當點擊選擇框彈出的框就會某人選中我們當前選擇的值。

       直接保存我們指定的某個屬性的值，通過value指定的話，總體來說可行，但是就是會出現上述的問題。但是微信為什么不給一個屬性用來專門指定索引值，而用value保存我們需要的東西呢。想不通，還是我沒發現怎么弄呢？？？？