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

巴特西

微信小程序picker下拉绑定数据

最新文章

热门文章