微信小程序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

转载于:https://www.cnblogs.com/dxzg/p/9771639.html