微信小程序下拉滾動(dòng)選擇器picker綁定數(shù)據(jù)的兩種方式 本地?cái)?shù)據(jù)綁定和wx.request(OBJECT) json數(shù)據(jù)綁定

1.本地?cái)?shù)據(jù)綁定 （對(duì)象數(shù)組）

Page({
    data:{
     //戶型   這是一個(gè)本地的對(duì)象，然后綁定到頁面上
    pic_array: [
      { id: 13, name: '1室1廳1衛(wèi)' },
      { id: 14, name: '1室2廳1衛(wèi)' },
      { id: 15, name: '2室1廳1衛(wèi)' },
      { id: 16, name: '3室1廳2衛(wèi)' },
      { id: 17, name: '4室1廳2衛(wèi)' },
      { id: 18, name: '5室1廳3衛(wèi)' },
      { id: 19, name: '6室1廳3衛(wèi)' },
      { id: 20, name: '7室以上' },
    ]，
     hx_index: 0；
   }， 
     bindPickerChange_hx: function (e) {
     console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value);
     this.setData({   //給變量賦值
     hx_index: e.detail.value,  //每次選擇了下拉列表的內(nèi)容同時(shí)修改下標(biāo)然后修改顯示的內(nèi)容，顯示的內(nèi)容和選擇的內(nèi)容一致
    })
     console.log('自定義值:', this.data.hx_select);
    },
})

 
      <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}"  bindchange="bindPickerChange_hx"  >
        <view class="picker" >
         戶型:  {{pic_array[hx_index].name}} //指定數(shù)組中指定下標(biāo)的name鍵對(duì)應(yīng)的值 
        view>
      picker>
屬性名range  類型Array/Object Array  存放你的本地?cái)?shù)據(jù)數(shù)組或者對(duì)象數(shù)組，需要加載的數(shù)據(jù)
屬性名range-key  類型String  當(dāng) range 是一個(gè) 二維Object Array 時(shí)，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
屬性名value  類型Array  value 每一項(xiàng)的值表示選擇了 range 對(duì)應(yīng)項(xiàng)中的第幾個(gè)（下標(biāo)從 0 開始）
屬性名data-  類型自定義屬性后更的屬性名字可以自定義 當(dāng)你需要設(shè)置其他值得時(shí)候可以使用  可選

2.網(wǎng)絡(luò)請(qǐng)求得到的json數(shù)據(jù)綁定下拉選擇器

首先得到后臺(tái)傳過來的json數(shù)據(jù)

data:{
}
onLoad: function () {
     var that = this;
     wx.request({
      url: "https://www.************",
      data: {
        a: ""  //參數(shù)
      },
      header: {
        "Content-Type": "applicatiSon/x-www-form-urlencoded"
      },
      method: "POST",
      success: function (res) {
        that.setData({
              pic_array: res.data.data.exp_hx,  //把json數(shù)據(jù)賦值給變量pic_array_hx
}) } }) }

   //綁定的方式一樣，只是改動(dòng)一下變量名既可以了，這是比較簡(jiǎn)單的方式
      <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}"  bindchange="bindPickerChange_hx"  >
        <view class="picker" >
         戶型:  {{pic_array[hx_index].name}} //指定數(shù)組中指定下標(biāo)的name鍵對(duì)應(yīng)的值 
        view>
      picker>