微信小程序下拉滚动选择器picker绑定数据

最终效果

index.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>

index.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);
  },
})