1. 程式人生 > >微信小程式下拉框之二維陣列或物件

微信小程式下拉框之二維陣列或物件

js檔案

Page({
    data:{
     //戶型   這是一個本地的物件,然後繫結到頁面上
    pic_array: [
      { id: 13, name: ‘1室1廳1衛‘ },
      { id: 14, name: ‘1室2廳1衛‘ },
      { id: 15, name: ‘2室1廳1衛‘ },
      { id: 16, name: ‘3室1廳2衛‘ },
      { id: 17, name: ‘4室1廳2衛‘ },
      { id: 18, name: ‘5室1廳3衛‘ },
      { id: 19, name: ‘6室1廳3衛‘ },
      { id: 
20, name: ‘7室以上‘ }, ], hx_index: 0; }, bindPickerChange_hx: function (e) { console.log(‘picker傳送選擇改變,攜帶值為‘, e.detail.value); this.setData({ //給變數賦值 hx_index: e.detail.value, //每次選擇了下拉列表的內容同時修改下標然後修改顯示的內容,顯示的內容和選擇的內容一致 }) console.log(‘自定義值:‘, this.data.hx_select); }, })

wxml

      <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}} //指定陣列中指定下標的name鍵對應的值 
        
</view> </picker>
屬性名range  型別Array/Object Array  存放你的本地資料陣列或者物件陣列,需要載入的資料
屬性名range-key  型別String  當 range 是一個 二維Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容
屬性名value  型別Array  value 每一項的值表示選擇了 range 對應項中的第幾個(下標從 0 開始)
屬性名data-  型別自定義屬性後更的屬性名字可以自定義 當你需要設定其他值得時候可以使用  可選