微信小程序picker下拉綁定數據

頁面部分

<picker mode = "selector" bindchange="bindPickerChange" value="{{project[idx].id}}" range="{{project}}" range-key="{{'val'}}">
    <view class="picker picker1">
      {{project[idx].val}}<text class='down'></text>
    </view>
</picker>

js部分

data: {
    idx:0,
    project:[
      {
        id: 0,
        val: '互聯網'
      },
      {
        id: 1,
        val: '建材'
      },
      {
        id: 2,
        val: '法律'
      },
    ]
},
// 改變下拉選項
bindPickerChange: function (event){
    this.setData({   //給變量賦值
      idx: event.detail.value,
    })
},

其中mode是選擇下拉框的模式，現支持五種選擇器，分別是普通選擇器（selector），多列選擇器（multiSelector），時間選擇器（time），日期選擇器（date），省市區選擇器（region），默認是普通選擇器。

range：mode為 selector 或 multiSelector 時，range 有效。

bindchange：監聽選項改變。改變選項時執行相應操作。

value：value 的值表示選擇了 range 中的第幾個（下標從 0 開始）。

range-key：當 range 是一個 Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容。

詳細內容參考微信公眾平台：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html